feat(dataviz): add RadialBar components

.eslintrc.json

@@ -24,7 +24,9 @@
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nx/typescript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-empty-interface": "off"
+      }
     },
     {
       "files": ["*.js", "*.jsx"],

cspell.config.yaml

@@ -0,0 +1,7 @@
+version: '0.2'
+ignorePaths: []
+dictionaryDefinitions: []
+dictionaries: []
+words: []
+ignoreWords: ['dataviz', 'deepmerge', 'csstype', 'buildable', 'pkgs', 'arcsin']
+import: []

package.json

@@ -47,6 +47,8 @@
     "@swc/core": "^1.4.13",
     "@swc/helpers": "~0.5.2",
     "@testing-library/react": "15.0.6",
+    "@types/d3-scale": "^4.0.8",
+    "@types/d3-shape": "^3.1.6",
     "@types/jest": "^29.4.0",
     "@types/node": "18.19.33",
     "@types/react": "18.3.1",
@@ -59,6 +61,9 @@
     "chromatic": "^9.1.0",
     "concurrently": "^8.2.2",
     "csstype": "^3.1.3",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "deepmerge": "^4.3.1",
     "eslint": "8.57.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "2.27.5",
@@ -74,9 +79,11 @@
     "prettier": "^2.6.2",
     "ts-jest": "^29.1.0",
     "ts-node": "10.9.1",
+    "type-fest": "^4.20.1",
     "typescript": "5.4.5",
     "vite": "5.2.11",
     "vite-plugin-dts": "~3.8.1",
     "vitest": "1.3.1"
-  }
+  },
+  "packageManager": "[email protected]+sha512.14e915759c11f77eac07faba4d019c193ec8637229e62ec99eefb7cf3c3b75c64447882b7c485142451ee3a6b408059cdfb7b7fa0341b975f12d0f7629c71195"
 }

packages/dataviz/.storybook/main.ts

@@ -1,7 +1,7 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: ['@storybook/addon-essentials'],
   framework: {
     name: '@storybook/react-vite',

packages/dataviz/package.json

@@ -8,5 +8,16 @@
       "import": "./index.mjs",
       "require": "./index.js"
     }
+  },
+  "type": "module",
+  "dependencies": {
+    "@types/d3-scale": "^4.0.8",
+    "@types/d3-shape": "^3.1.6",
+    "csstype": "^3.1.3",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "deepmerge": "^4.3.1",
+    "react": "^17 || ^18",
+    "type-fest": "^4.20.1"
   }
 }

packages/dataviz/src/RadialBar/RadialBar.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { RadialBar } from './RadialBar';
+import { RadialBarSweep } from '../RadialBarSweep';
+
+const meta: Meta<typeof RadialBar> = {
+  title: 'RadialBar',
+  component: RadialBar,
+  decorators: (Story) => (
+    <svg viewBox="-100 -100 200 200" width="200" height="200">
+      <Story />
+    </svg>
+  ),
+  argTypes: {
+    radius: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 100,
+        step: 1,
+      },
+    },
+    ratio: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 1,
+        step: 0.01,
+      },
+    },
+    cornerRadius: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 50,
+        step: 1,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadialBar>;
+
+export const FullCircle: Story = {
+  args: {
+    cornerRadius: 10,
+    radius: 100,
+    ratio: 0.8,
+    children: [
+      <RadialBarSweep key="0" to={100} fill="lightgrey" />,
+      <RadialBarSweep key="1" to={60} />,
+    ],
+    ctx: {
+      radialBarScale: {
+        angleMin: 0,
+        angleMax: 2 * Math.PI,
+        valueMin: 0,
+        valueMax: 100,
+      },
+    },
+  },
+};
+
+export const HalfCircle: Story = {
+  args: {
+    cornerRadius: 10,
+    radius: 100,
+    ratio: 0.8,
+    children: [
+      <RadialBarSweep key="0" to={3} fill="lightgrey" />,
+      <RadialBarSweep key="1" to={2} />,
+    ],
+    ctx: {
+      radialBarScale: {
+        angleMin: (-1 * Math.PI) / 2,
+        angleMax: Math.PI / 2,
+        valueMin: 1,
+        valueMax: 3,
+      },
+    },
+  },
+};