feat: Charts package continued

.github/workflows/chromatic.yml

@@ -0,0 +1,22 @@
+name: "Chromatic"
+
+on: push
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.14.0
+      - name: Install pnpm
+        run: npm install -g pnpm
+      - name: Install dependencies
+        run: pnpm install
+      - name: Run Chromatic
+        uses: chromaui/action@latest

.storybook/main.js

@@ -1,4 +1,4 @@
-import { dirname, join } from 'node:path'
+const { dirname, join } = require('node:path')
 
 module.exports = {
   stories: ['../packages/**/*.stories.@(js|jsx|ts|tsx)'],

biome.json

@@ -52,7 +52,7 @@
         "noRedeclare": "off"
       },
       "correctness": {
-        "useExhaustiveDependencies": "off",
+        "useExhaustiveDependencies": "warn",
         "noUnusedImports": "error"
       }
     }

chromatic.config.json

@@ -0,0 +1,7 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:67dafea9025400b3251fa8ef",
+  "projectToken": "chpt_242dc59fcdeb02b",
+  "zip": true,
+  "buildScriptName": "build:storybook"
+}

package.json

@@ -40,29 +40,29 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@chromatic-com/storybook": "^1",
+    "@chromatic-com/storybook": "^3.2.6",
     "@commitlint/cli": "^9.1.2",
     "@commitlint/config-conventional": "^9.1.2",
     "@commitlint/prompt": "^9.1.2",
-    "@playwright/test": "^1.43.0",
-    "@storybook/addon-a11y": "^8.3.6",
-    "@storybook/addon-actions": "^8.3.6",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-storysource": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-vite": "^8.3.6",
-    "@storybook/react-webpack5": "^8.3.6",
+    "@playwright/test": "^1.51.1",
+    "@storybook/addon-a11y": "^8.6.7",
+    "@storybook/addon-actions": "^8.6.7",
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/addon-interactions": "^8.6.7",
+    "@storybook/addon-links": "^8.6.7",
+    "@storybook/addon-storysource": "^8.6.7",
+    "@storybook/react": "^8.6.7",
+    "@storybook/react-vite": "^8.6.7",
+    "@storybook/react-webpack5": "^8.6.7",
     "@storybook/test-runner": "^0.17.0",
-    "@storybook/theming": "^8.3.6",
+    "@storybook/theming": "^8.6.7",
     "@types/node": "20.14.9",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
     "@vitejs/plugin-react": "4.1.0",
     "@vtex/shoreline-test-utils": "workspace:*",
-    "chromatic": "^9.1.0",
-    "commitizen": "^4.2.0",
+    "chromatic": "^11.27.0",
+    "commitizen": "^4.3.1",
     "concurrently": "^8.2.2",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
@@ -75,7 +75,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-test-renderer": "18.3.1",
-    "storybook": "^8.3.6",
+    "storybook": "^8.6.7",
     "tslib": "2.6.3",
     "tsup": "8.1.0",
     "turbo": "2.2.3",
@@ -93,7 +93,7 @@
     }
   },
   "dependencies": {
-    "@storybook/test": "^8.3.6",
-    "dotenv": "^16.4.5"
+    "@storybook/test": "^8.6.7",
+    "dotenv": "^16.4.7"
   }
 }

packages/charts/README.md

@@ -0,0 +1,25 @@
+# 🌊📊 Shoreline Charts
+
+[Shoreline](https://github.com/vtex/shoreline/tree/main)'s data visualization library, featuring a standard set of charts and their variants, built with Apache Echarts.
+
+<img width="849" height="342" alt="Screenshot_21-Aug_18-02-39_google-chrome" src="https://github.com/user-attachments/assets/aa2a4d5a-200f-4481-aa60-192d30e79a32" />
+
+
+
+## Install and build
+`shoreline-components` and `echarts` are peer dependencies of `shoreline-charts`
+```sh
+pnpm add @vtex/shoreline echarts @vtex/shoreline-charts
+```
+## Run
+``` sh
+pnpm test # [*] runs all tests from all components at once
+pnpm clean # [*] useful if you want to clean all packages at once - since they are linked, sometimes a rebase not followed by a fresh reinstall can cause some issues
+pnpm dev:storybook # [components package] runs its storybook alongside the styles package
+pnpm dev:docs # [docs package] runs the docs website
+```
+
+## Contribute to this repo
+
+Pull requests are welcome, please check our
+[development guideline](https://shoreline.vtex.com/guides/code/development-guideline)!

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": "6.x",
+    "react": "18.x",
+    "react-dom": "18.x"
+  },
+  "devDependencies": {
+    "@types/lodash.clonedeep": "^4.5.9",
+    "@vtex/shoreline": "workspace:*"
+  },
+  "dependencies": {
+    "@vtex/shoreline-utils": "workspace:*",
+    "echarts": "^6.0.0",
+    "echarts-for-react": "^3.0.4",
+    "lodash.clonedeep": "^4.5.0",
+    "vitest-canvas-mock": "^0.3.3"
+  }
+}

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

@@ -0,0 +1,52 @@
+export const BAR_CHART_DATA = {
+  xAxis: {
+    weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  },
+  series: {
+    dayNumbers: [1, 2, 3, 4, 5, 6, 7],
+  },
+}
+
+const dayNumbers_100thousand = []
+const numbers_50thousand = []
+const dayNumbers_30thousand = []
+const dayNumbers_20thousand = []
+const dayNumbers_10thousand = []
+const numbers_5thousand = []
+const numbers_4thousand = []
+const numbers_1thousand = []
+
+for (let i = 0; i < 100_000; i++) {
+  dayNumbers_100thousand.push(i)
+  if (i <= 1000) numbers_1thousand.push(i)
+  if (i <= 4_000) numbers_4thousand.push(i)
+  if (i <= 5_000) numbers_5thousand.push(i)
+  if (i <= 10_000) dayNumbers_10thousand.push(i)
+  if (i <= 20_000) dayNumbers_20thousand.push(i)
+  if (i <= 30_000) dayNumbers_30thousand.push(i)
+  if (i <= 50_000) numbers_50thousand.push(i)
+}
+
+export const CHART_DATA = {
+  xAxis: {
+    weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  },
+  series: {
+    dayNumbers: [1, 2, 3, 4, 5, 6, 7],
+    dayNumbers_100thousand: dayNumbers_100thousand,
+    dayNumbers_50thousand: numbers_50thousand,
+    dayNumbers_30thousand: dayNumbers_30thousand,
+    dayNumbers_20thousand: dayNumbers_20thousand,
+    dayNumbers_10thousand: dayNumbers_10thousand,
+    dayNumbers_5thousand: numbers_5thousand,
+    dayNumbers_1thousand: numbers_1thousand,
+  },
+}
+
+export const CHART_COMPOSITOR_DATA = {
+  data1: [1, 2, 3, 4, 5],
+  data2: [1, 3, 2, 5, 4],
+  data4_thousand: numbers_4thousand,
+  data5_thousand: numbers_5thousand,
+  data50_thousand: numbers_50thousand,
+}

packages/charts/src/benchmarks/barChart.bench.tsx

@@ -0,0 +1,66 @@
+import { beforeAll, bench } from 'vitest'
+import { Chart } from '../components/chart'
+import { render } from '@vtex/shoreline-test-utils'
+import { CHART_DATA } from './__fixtures__/chartData'
+
+beforeAll(() => {
+  Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+    configurable: true,
+    value: 300,
+  })
+  Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+    configurable: true,
+    value: 200,
+  })
+})
+
+bench(
+  'renders bar chart with 1 thousand points',
+  async () => {
+    const { unmount } = render(
+      <Chart
+        series={[{ data: CHART_DATA.series.dayNumbers_1thousand }]}
+        chartConfig={{
+          type: 'bar',
+        }}
+        style={{ width: '100%', height: '100%' }}
+      />
+    )
+    unmount()
+  },
+  { iterations: 300 }
+)
+
+bench(
+  'renders bar chart with 5 thousand points',
+  async () => {
+    const { unmount } = render(
+      <Chart
+        series={[{ data: CHART_DATA.series.dayNumbers_5thousand }]}
+        chartConfig={{
+          type: 'bar',
+        }}
+        style={{ width: '100%', height: '100%' }}
+      />
+    )
+    unmount()
+  },
+  { iterations: 300 }
+)
+
+bench(
+  'renders bar chart with 10 thousand points',
+  async () => {
+    const { unmount } = render(
+      <Chart
+        series={[{ data: CHART_DATA.series.dayNumbers_10thousand }]}
+        chartConfig={{
+          type: 'bar',
+        }}
+        style={{ width: '100%', height: '100%' }}
+      />
+    )
+    unmount()
+  },
+  { iterations: 300 }
+)

packages/charts/src/benchmarks/chartCompositor.bench.tsx

@@ -0,0 +1,84 @@
+import { beforeAll, bench } from 'vitest'
+import { render } from '@vtex/shoreline-test-utils'
+import { CHART_DATA } from './__fixtures__/chartData'
+import { ChartCompositor } from '../components'
+
+beforeAll(() => {
+  Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+    configurable: true,
+    value: 300,
+  })
+  Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+    configurable: true,
+    value: 200,
+  })
+})
+
+bench(
+  'renders a chart compositor of bar and line chart both with 1 thousand points',
+  async () => {
+    const { unmount } = render(
+      <ChartCompositor
+        charts={[
+          {
+            series: { data: CHART_DATA.series.dayNumbers_1thousand },
+            chartConfig: { type: 'line' },
+          },
+          {
+            series: { data: CHART_DATA.series.dayNumbers_1thousand },
+            chartConfig: { type: 'bar' },
+          },
+        ]}
+        tooltip={{ type: 'line' }}
+      />
+    )
+    unmount()
+  },
+  { iterations: 300 }
+)
+
+bench(
+  'renders a chart compositor of bar and line chart both with 5 thousand points',
+  async () => {
+    const { unmount } = render(
+      <ChartCompositor
+        charts={[
+          {
+            series: { data: CHART_DATA.series.dayNumbers_5thousand },
+            chartConfig: { type: 'line' },
+          },
+          {
+            series: { data: CHART_DATA.series.dayNumbers_5thousand },
+            chartConfig: { type: 'bar' },
+          },
+        ]}
+        tooltip={{ type: 'line' }}
+      />
+    )
+    unmount()
+  },
+  { iterations: 300 }
+)
+
+bench(
+  'renders a chart compositor of bar and line chart both with 10 thousand points',
+  async () => {
+    const { unmount } = render(
+      <ChartCompositor
+        charts={[
+          {
+            series: { data: CHART_DATA.series.dayNumbers_10thousand },
+            chartConfig: { type: 'line' },
+          },
+          {
+            series: { data: CHART_DATA.series.dayNumbers_10thousand },
+            chartConfig: { type: 'bar' },
+          },
+        ]}
+        tooltip={{ type: 'line' }}
+      />
+    )
+    unmount()
+  },
+  { iterations: 300 }
+)