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"
+    },
+    "./css": "./dist/index.css"
+  },
+  "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-canvas-mock": "^0.3.3"
+  }
+}

packages/charts/src/components/chart/chart.tsx

@@ -0,0 +1,111 @@
+import {
+  useRef,
+  useEffect,
+  useMemo,
+  forwardRef,
+  useImperativeHandle,
+  type ComponentPropsWithRef,
+  useCallback,
+} from 'react'
+import type { EChartsOption, SetOptionOpts } from 'echarts'
+import ReactECharts, { type EChartsInstance } from 'echarts-for-react'
+import type * as echarts from 'echarts'
+
+import { defaultTheme } from '../../theme/themes'
+import type { ChartConfig } from '../../types/chart'
+import { getChartOptions } from '../../utils/chart'
+import { canUseDOM } from '@vtex/shoreline-utils'
+import { DEFAULT_LOADING_SPINNER } from '../../theme/chartStyles'
+
+/**
+ * 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,
+      loadingConfig = DEFAULT_LOADING_SPINNER,
+      chartConfig,
+      style,
+      ...otherProps
+    } = props
+
+    const chartRef = useRef<ReactECharts>(null)
+
+    useImperativeHandle(ref, () => {
+      if (chartRef.current) {
+        return chartRef.current.getEchartsInstance()
+      }
+      return undefined
+    })
+
+    const chartOptions: EChartsOption = useMemo(() => {
+      const { type, variant } = chartConfig
+      return getChartOptions(option, type, variant) || option
+    }, [option, chartConfig])
+
+    const handleResize = useCallback(() => {
+      if (chartRef.current) {
+        chartRef.current.getEchartsInstance().resize()
+      }
+    }, [chartRef])
+
+    useEffect(() => {
+      if (!canUseDOM) return
+
+      window.addEventListener('resize', handleResize)
+      return () => {
+        window.removeEventListener('resize', handleResize)
+      }
+    }, [handleResize, canUseDOM])
+
+    return (
+      <div data-sl-chart>
+        <ReactECharts
+          ref={chartRef}
+          theme={defaultTheme}
+          option={chartOptions}
+          style={{ minWidth: 290, ...style }}
+          opts={{
+            renderer: 'svg',
+          }}
+          showLoading={loading}
+          loadingOption={loadingConfig}
+          onChartReady={(instance) => instance.resize()}
+          {...otherProps}
+        />
+      </div>
+    )
+  }
+)
+
+export interface ChartsOptions {
+  /**
+   * Echarts options for the chart
+   */
+  option: EChartsOption
+  /**
+   * Echarts settings
+   */
+  settings?: SetOptionOpts
+  /**
+   * Wether is loading
+   * @default false
+   */
+  loading?: boolean
+  /**
+   * Options for customize the chart loading
+   * @default false
+   */
+  loadingConfig?: EChartsInstance['showLoading']
+  /**
+   * Configs containing type of chart and its variants, each variant is a pre-defined chart style for each type
+   * @default default
+   */
+  chartConfig: ChartConfig
+}
+
+export type ChartProps = ChartsOptions & ComponentPropsWithRef<'div'>

packages/charts/src/components/chart/index.ts

@@ -0,0 +1 @@
+export * from './chart'

packages/charts/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './tooltip'
+export * from './chart'

packages/charts/src/components/tooltip/index.ts

@@ -0,0 +1 @@
+export * from './tooltip'

packages/charts/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,45 @@
+import type { TooltipComponentFormatterCallbackParams } from 'echarts'
+import { renderToStaticMarkup } from 'react-dom/server'
+import '../../theme/components/tooltip.css'
+
+export default function ChartTooltip({ params }: ChartTooltipProps) {
+  return (
+    <div data-sl-chart-tooltip>
+      {Array.isArray(params) ? (
+        params.map((param) => (
+          <ChartTooltipBase key={param.dataIndex} params={param} />
+        ))
+      ) : (
+        <ChartTooltipBase params={params} />
+      )}
+    </div>
+  )
+}
+
+export function ChartTooltipBase({ params }: { params: any }) {
+  return (
+    <>
+      <h4 data-sl-chart-tooltip-title>{params.name}</h4>
+      <div data-sl-chart-tooltip-data-container>
+        <div data-sl-chart-tooltip-data-serie-container>
+          <span
+            data-sl-chart-tooltip-data-serie-label-box
+            style={{
+              backgroundColor: params.color,
+            }}
+          />
+          <span data-sl-chart-tooltip-data-serie-name>{params.seriesName}</span>
+        </div>
+        <span data-sl-chart-tooltip-data-serie-value>{params.value}</span>
+      </div>
+    </>
+  )
+}
+
+export const getTooltipStaticString = (
+  params: TooltipComponentFormatterCallbackParams
+) => renderToStaticMarkup(<ChartTooltip params={params} />)
+
+export interface ChartTooltipProps {
+  params: TooltipComponentFormatterCallbackParams
+}

packages/charts/src/index.ts

@@ -0,0 +1 @@
+export * from './components'

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

@@ -0,0 +1,122 @@
+// biome-ignore lint/correctness/noUnusedImports: <explanation>
+import React from 'react'
+import { Chart } from '../index'
+import { compactNumber } from '../utils/format'
+import type { StoryObj } from '@storybook/react'
+
+const Bar = {
+  title: 'Charts/bar',
+  component: Chart,
+}
+export default Bar
+
+type Story = StoryObj<typeof Chart>
+
+export const Basic: Story = {
+  args: {
+    option: {
+      xAxis: {
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      },
+      series: [{ data: [1, 2, 3, 4, 5, 6, 7] }],
+    },
+    chartConfig: { type: 'bar' },
+    style: { height: 550 },
+  },
+}
+
+export const Loading: Story = {
+  render: (args) => {
+    const { option, chartConfig, loading } = args
+
+    return (
+      <Chart
+        option={option}
+        chartConfig={chartConfig}
+        style={{ height: 550 }}
+        loading={loading}
+      />
+    )
+  },
+  args: {
+    option: {
+      xAxis: {
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      },
+      series: [{ data: [1, 2, 3, 4, 5, 6, 7] }],
+    },
+    chartConfig: { type: 'bar' },
+    style: { height: 550 },
+    loading: true,
+  },
+}
+export const MultiSeries: Story = {
+  args: {
+    option: {
+      xAxis: {
+        data: ['Mon', 'Tue', 'Wed'],
+      },
+      series: [
+        { data: [3, 2, 3, 4], name: 'Series 1' },
+        { data: [1, 4, 2, 3], name: 'Series 2' },
+        { data: [2, 1, 4, 1], name: 'Series 3' },
+      ],
+    },
+    chartConfig: { type: 'bar' },
+    style: { height: 550 },
+  },
+}
+export const WithHugeNumbers: Story = {
+  args: {
+    option: {
+      xAxis: {
+        data: ['Mon', 'Tue', 'Wed'],
+      },
+      yAxis: {
+        axisLabel: {
+          formatter: (value: number) => compactNumber(value),
+        },
+      },
+      series: [
+        {
+          data: [12344441, 62346346, 97346346],
+          name: 'Series 1',
+        },
+      ],
+    },
+    chartConfig: { type: 'bar' },
+    style: { height: 550 },
+  },
+}
+
+export const Horizontal: Story = {
+  args: {
+    option: {
+      xAxis: {
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Test'],
+      },
+      series: [
+        { data: [1, 2, 3, 4, 5, 6, 7, 8] },
+        { data: [1, 4, 2, 1, 4, 3, 5, 9] },
+      ],
+    },
+    chartConfig: { type: 'bar', variant: 'horizontal' },
+    style: { height: 550 },
+  },
+}
+
+export const MultiType: Story = {
+  args: {
+    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' },
+      ],
+    },
+    chartConfig: { 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],
+  },
+}