Feature/charts package

packages/charts/README.md

@@ -0,0 +1,7 @@
+# Shoreline Charts
+
+`shoreline-components` and `echarts` are peer dependencies of `shoreline-charts`
+
+```sh
+pnpm add @vtex/shoreline echarts @vtex/shoreline-charts
+```

packages/charts/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@vtex/shoreline-charts",
+  "description": "Shoreline datavis library",
+  "version": "0.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "scripts": {
+    "prebuild": "rm -rf dist",
+    "dev": "tsup --watch",
+    "build": "tsup"
+  },
+  "repository": {
+    "directory": "packages/charts",
+    "type": "git",
+    "url": "git+https://github.com/vtex/shoreline.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vtex/shoreline/issues"
+  },
+  "peerDependencies": {
+    "@vtex/shoreline": "1.x",
+    "echarts": "5.x",
+    "react": "18.x",
+    "react-dom": "18.x"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.4",
+    "@vtex/shoreline": "workspace:*",
+    "echarts": "5.5.0"
+  },
+  "dependencies": {
+    "@vtex/shoreline-utils": "workspace:*",
+    "echarts-for-react": "^3.0.2",
+    "lodash": "^4.17.21",
+    "vitest": "^1.6.0",
+    "vitest-canvas-mock": "^0.3.3"
+  }
+}

packages/charts/src/chart.tsx

@@ -0,0 +1,103 @@
+import {
+  useRef,
+  useEffect,
+  useMemo,
+  forwardRef,
+  useImperativeHandle,
+  type ComponentPropsWithRef,
+  useCallback,
+} from 'react'
+import type { EChartsOption, SetOptionOpts } from 'echarts'
+import ReactECharts from 'echarts-for-react'
+import type * as echarts from 'echarts'
+
+import { defaultTheme } from './theme/themes'
+import type { ChartTypes, ChartVariants } from './types/chart'
+import { getChartOptions } from './utils/chart'
+
+/**
+ * Render a Shoreline Chart with echarts
+ * @see https://echarts.apache.org/en/index.html
+ */
+export const Chart = forwardRef<echarts.EChartsType | undefined, ChartProps>(
+  function Charts(props, ref) {
+    const {
+      option,
+      settings,
+      loading = false,
+      variant = 'default',
+      type,
+      style,
+      ...otherProps
+    } = props
+
+    const chartRef = useRef<ReactECharts>(null)
+
+    useImperativeHandle(ref, () => {
+      if (chartRef.current) {
+        return chartRef.current.getEchartsInstance()
+      }
+      return undefined
+    })
+
+    const chartOptions: EChartsOption = useMemo(() => {
+      return getChartOptions(option, type, variant) || option
+    }, [option, type, variant])
+
+    const handleResize = useCallback(() => {
+      if (chartRef.current) {
+        chartRef.current.getEchartsInstance().resize()
+      }
+    }, [])
+
+    useEffect(() => {
+      window.addEventListener('resize', handleResize)
+      return () => {
+        window.removeEventListener('resize', handleResize)
+      }
+    }, [handleResize])
+
+    if (loading) return <div>loading...</div>
+
+    return (
+      <div data-sl-chart {...otherProps}>
+        <ReactECharts
+          ref={chartRef}
+          theme={defaultTheme}
+          option={chartOptions}
+          style={style}
+          opts={{
+            renderer: 'svg',
+          }}
+        />
+      </div>
+    )
+  }
+)
+
+export interface ChartsOptions {
+  /**
+   * Echarts options
+   */
+  option: EChartsOption
+  /**
+   * Echarts settings
+   */
+  settings?: SetOptionOpts
+  /**
+   * Wether is loading
+   * @default false
+   */
+  loading?: boolean
+  /**
+   * Chart type to be rendered
+   */
+  type: ChartTypes
+  /**
+   * Pre-defined chart style for each type
+   * @default default
+   */
+  variant?: ChartVariants
+}
+
+export type ChartProps = ChartsOptions & ComponentPropsWithRef<'div'>

packages/charts/src/index.ts

@@ -0,0 +1,2 @@
+export { Chart } from './chart'
+export type { ChartProps } from './chart'

packages/charts/src/stories/bar-charts.stories.tsx

@@ -0,0 +1,58 @@
+import { Chart } from '../index'
+
+export default {
+  title: 'Charts/bar',
+}
+
+export function Basic() {
+  return (
+    <Chart
+      option={{
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        series: { data: [1, 2, 3, 4, 5, 6, 7] },
+      }}
+      type="bar"
+      style={{ height: 550 }}
+    />
+  )
+}
+
+export function Horizontal() {
+  return (
+    <Chart
+      option={{
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        series: [
+          { data: [1, 2, 3, 4, 5, 6, 7] },
+          { data: [1, 4, 2, 1, 4, 3, 5] },
+        ],
+      }}
+      type="bar"
+      variant="horizontal"
+      style={{ height: 550 }}
+    />
+  )
+}
+
+export function MultiType() {
+  return (
+    <Chart
+      option={{
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        series: [
+          { data: [1, 2, 3, 4, 5, 6, 7] },
+          { data: [1, 4, 2, 1, 4, 3, 5], type: 'line' },
+        ],
+      }}
+      type="bar"
+      variant="default"
+      style={{ height: 550 }}
+    />
+  )
+}

packages/charts/src/tests/__fixtures__/chartData.ts

@@ -0,0 +1,8 @@
+export const BAR_CHART_DATA = {
+  xAxis: {
+    weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  },
+  series: {
+    dayNumbers: [1, 2, 3, 4, 5, 6, 7],
+  },
+}

packages/charts/src/tests/charts.test.tsx

@@ -0,0 +1,38 @@
+import {
+  describe,
+  expect,
+  test,
+  render,
+  waitFor,
+  screen,
+} from '@vtex/shoreline-test-utils'
+import { Chart } from '../chart'
+import { BAR_CHART_DATA } from './__fixtures__/chartData'
+
+describe('@vtex.shoreline-charts bar chart tests', () => {
+  test('renders the bar chart with correct data', async () => {
+    const { container } = render(
+      <Chart
+        option={{
+          xAxis: {
+            data: BAR_CHART_DATA.xAxis.weekdays,
+          },
+          series: { data: BAR_CHART_DATA.series.dayNumbers },
+        }}
+        type="bar"
+        style={{ width: '100%', height: '400px' }}
+      />
+    )
+
+    const divChartContainer = container.querySelector('[data-sl-chart]')
+    await waitFor(() => expect(divChartContainer).toBeInTheDocument())
+
+    BAR_CHART_DATA.xAxis.weekdays.forEach((value) =>
+      waitFor(() => expect(screen.queryByText(value)).toBeInTheDocument())
+    )
+
+    BAR_CHART_DATA.series.dayNumbers.forEach((value) =>
+      waitFor(() => expect(screen.queryByText(value)).toBeInTheDocument())
+    )
+  })
+})

packages/charts/src/tests/vitest.config.ts

@@ -0,0 +1,20 @@
+import { vi } from 'vitest'
+import 'vitest-canvas-mock'
+
+vi.mock('echarts', async () => {
+  const echarts = await vi.importActual<typeof import('echarts')>('echarts')
+  return {
+    ...echarts,
+    init: vi.fn(() => {
+      return {
+        setOption: vi.fn(),
+        resize: vi.fn(),
+        getOption: vi.fn(),
+        dispose: vi.fn(),
+        clear: vi.fn(),
+        on: vi.fn(),
+        off: vi.fn(),
+      }
+    }),
+  }
+})

packages/charts/src/theme/chartStyles.ts

@@ -0,0 +1,29 @@
+export const CHART_STYLES = {
+  bar: {
+    default: {
+      xAxis: {
+        type: 'category',
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: {
+        type: 'bar',
+      },
+    },
+    horizontal: {
+      xAxis: {
+        type: 'value',
+      },
+      yAxis: {
+        type: 'category',
+      },
+      series: {
+        type: 'bar',
+        itemStyle: {
+          borderRadius: [0, 4, 4, 0],
+        },
+      },
+    },
+  },
+}

packages/charts/src/theme/colors.ts

@@ -0,0 +1,20 @@
+export const CATEGORICAL = {
+  primary: '#014592',
+  secondary: '#9C56F3',
+  tertiary: '#0D504D',
+  quaternary: '#CA226A',
+  quinary: '#F95D47',
+  senary: '#5C12B6',
+  septenary: '#08A822',
+  octonary: '#EF5997',
+  nonary: '#157BF4',
+  denary: '#B18D01',
+  undenary: '#013A5E',
+  duodenary: '#01A29B;',
+  ternary: '#B24D01',
+  fourteen: '#720000',
+}
+
+export const BASE = {
+  lineColor: '#ADADAD',
+}

packages/charts/src/theme/themes.ts

@@ -0,0 +1,45 @@
+import { BASE, CATEGORICAL } from './colors'
+
+export const defaultTheme = {
+  color: [
+    CATEGORICAL.primary,
+    CATEGORICAL.secondary,
+    CATEGORICAL.tertiary,
+    CATEGORICAL.quaternary,
+    CATEGORICAL.quinary,
+    CATEGORICAL.senary,
+    CATEGORICAL.septenary,
+    CATEGORICAL.octonary,
+    CATEGORICAL.nonary,
+    CATEGORICAL.denary,
+    CATEGORICAL.undenary,
+    CATEGORICAL.duodenary,
+    CATEGORICAL.ternary,
+    CATEGORICAL.fourteen,
+  ],
+  categoryAxis: {
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: BASE.lineColor,
+      },
+    },
+  },
+  valueAxis: {
+    type: 'value',
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: BASE.lineColor,
+      },
+    },
+  },
+  bar: {
+    itemStyle: {
+      borderRadius: [4, 4, 0, 0],
+    },
+  },
+}