diff --git a/packages/dataviz/.storybook/main.ts b/packages/dataviz/.storybook/main.ts index 74e7dbcc..60e8fb7d 100644 --- a/packages/dataviz/.storybook/main.ts +++ b/packages/dataviz/.storybook/main.ts @@ -1,7 +1,11 @@ import type { StorybookConfig } from '@storybook/react-vite'; const config: StorybookConfig = { - stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'], + stories: [ + '../decorators/**/*.stories.@(js|jsx|ts|tsx|mdx)', + '../examples/**/*.stories.@(js|jsx|ts|tsx|mdx)', + '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)', + ], addons: ['@storybook/addon-essentials'], framework: { name: '@storybook/react-vite', diff --git a/packages/dataviz/.storybook/preview-head.html b/packages/dataviz/.storybook/preview-head.html new file mode 100644 index 00000000..110d6fb2 --- /dev/null +++ b/packages/dataviz/.storybook/preview-head.html @@ -0,0 +1,6 @@ + + + diff --git a/packages/dataviz/decorators/OutlineOriginCenter.stories.tsx b/packages/dataviz/decorators/OutlineOriginCenter.stories.tsx new file mode 100644 index 00000000..5cd1ded7 --- /dev/null +++ b/packages/dataviz/decorators/OutlineOriginCenter.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import { OutlineOriginCenter } from './OutlineOriginCenter'; + +const meta: Meta = { + title: 'Decorators/OutlineOriginCenter', + component: OutlineOriginCenter, + decorators: (Story) => ( + + + + ), +}; + +export default meta; + +type Story = StoryObj; + +export const Example: Story = { + args: {}, +}; diff --git a/packages/dataviz/decorators/OutlineOriginCenter.tsx b/packages/dataviz/decorators/OutlineOriginCenter.tsx new file mode 100644 index 00000000..cb965cda --- /dev/null +++ b/packages/dataviz/decorators/OutlineOriginCenter.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +export const OutlineOriginCenter = () => ( + <> + + + + +); diff --git a/packages/dataviz/decorators/OutlineOriginTopLeft.stories.tsx b/packages/dataviz/decorators/OutlineOriginTopLeft.stories.tsx new file mode 100644 index 00000000..89a93e74 --- /dev/null +++ b/packages/dataviz/decorators/OutlineOriginTopLeft.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import { OutlineOriginTopLeft } from './OutlineOriginTopLeft'; + +const meta: Meta = { + title: 'Decorators/OutlineOriginTopLeft', + component: OutlineOriginTopLeft, + decorators: (Story) => ( + + + + ), +}; + +export default meta; + +type Story = StoryObj; + +export const Example: Story = { + args: {}, +}; diff --git a/packages/dataviz/decorators/OutlineOriginTopLeft.tsx b/packages/dataviz/decorators/OutlineOriginTopLeft.tsx new file mode 100644 index 00000000..cd48901a --- /dev/null +++ b/packages/dataviz/decorators/OutlineOriginTopLeft.tsx @@ -0,0 +1,32 @@ +import React from 'react'; + +export const OutlineOriginTopLeft = () => ( + <> + + + + + +); diff --git a/packages/dataviz/decorators/index.ts b/packages/dataviz/decorators/index.ts new file mode 100644 index 00000000..5b7f557b --- /dev/null +++ b/packages/dataviz/decorators/index.ts @@ -0,0 +1,2 @@ +export * from './OutlineOriginCenter'; +export * from './OutlineOriginTopLeft'; diff --git a/packages/dataviz/examples/report-card/empowerment-metric/DualLinearGauge.stories.tsx b/packages/dataviz/examples/report-card/empowerment-metric/DualLinearGauge.stories.tsx new file mode 100644 index 00000000..64c6ff0a --- /dev/null +++ b/packages/dataviz/examples/report-card/empowerment-metric/DualLinearGauge.stories.tsx @@ -0,0 +1,242 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { + Bar, + BarFill, + BarProps, + BarScale, + BarUnitLabel, + BarUnits, + useResponsiveChart, +} from '../../../src'; + +const Purple500 = '#6554C0'; +const Purple200 = '#C0B6F2'; + +const Neutral400 = '#42526E'; +const Neutral100 = '#6B778C'; +const FontWeightNormal = 400; +const FontWeightBold = 600; + +const unitLabelStyle = (at: number, value: number) => { + const isPrimaryValue = at === value; + const fontWeight = isPrimaryValue ? FontWeightBold : FontWeightNormal; + const fill = isPrimaryValue ? Neutral400 : Neutral100; + return { + fontFamily: '"Inter"', + fontSize: '16px', + fontStyle: 'normal', + fontWeight, + fill, + }; +}; + +const ReportCardEmpowermentMetricDualLinearGauge = (props: { + valueMin: number; + valueMax: number; + // current week + valuePrimary: number; + thicknessPrimary: number; + // previous week + valueSecondary: number; + thicknessSecondary: number; + // extra + cornerRadius: BarProps['cornerRadius']; + valuePrimaryContinuous: number; + valueSecondaryContinuous: number; + borderWidth: BarProps['borderWidth']; + unitsOffset: number; +}) => { + const { + valueMin, + valueMax, + valuePrimary: valuePrimaryProp, + valueSecondary: valueSecondaryProp, + thicknessPrimary, + thicknessSecondary, + cornerRadius, + valuePrimaryContinuous, + valueSecondaryContinuous, + borderWidth, + unitsOffset, + } = props; + + const valuePrimary = + valuePrimaryContinuous < valueMin + ? valuePrimaryProp + : valuePrimaryContinuous; + const valueSecondary = + valueSecondaryContinuous < valueMin + ? valueSecondaryProp + : valueSecondaryContinuous; + + const marginTop = 8; + const marginRight = 8; + const marginBottom = 8; + const marginLeft = 8; + const innerHeight = 70; + const height = innerHeight + marginTop + marginBottom; + // const minWidth = 220; + + const chart = useResponsiveChart({ + height, + innerHeight, + marginBottom, + marginLeft, + marginRight, + marginTop, + }); + + return ( +
+ + {/* inner */} + + + + + + + + Not really + + + Kind of + + + Very + + + + + + + + + + +
+ ); +}; + +const meta: Meta = { + title: 'Examples/Report Card/Empowerment Metric/DualLinearGauge', + component: ReportCardEmpowermentMetricDualLinearGauge, + args: { + valueMin: 1, + valueMax: 3, + valuePrimary: 2, + valueSecondary: 3, + thicknessPrimary: 30, + thicknessSecondary: 16, + cornerRadius: { end: '50%' }, + valuePrimaryContinuous: 1 - 0.05, + valueSecondaryContinuous: 1 - 0.05, + borderWidth: 1.66, + unitsOffset: 6, + }, + argTypes: { + valuePrimary: { + control: { + type: 'range', + min: 1, + max: 3, + step: 1, + }, + }, + valueSecondary: { + control: { + type: 'range', + min: 1, + max: 3, + step: 1, + }, + }, + thicknessPrimary: { + control: { + type: 'range', + min: 1, + max: 30, + step: 1, + }, + }, + thicknessSecondary: { + control: { + type: 'range', + min: 1, + max: 30, + step: 1, + }, + }, + cornerRadius: { + control: { type: 'object' }, + }, + valuePrimaryContinuous: { + control: { + type: 'range', + min: 1 - 0.05, + max: 3, + step: 0.05, + }, + }, + valueSecondaryContinuous: { + control: { + type: 'range', + min: 1 - 0.05, + max: 3, + step: 0.05, + }, + }, + borderWidth: { + control: { + type: 'range', + min: 0, + max: 2, + step: 0.33, + }, + }, + unitsOffset: { + control: { + type: 'range', + min: 0, + max: 16, + step: 1, + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Example: Story = {}; diff --git a/packages/dataviz/examples/report-card/empowerment-metric/DualRadialGauge.stories.tsx b/packages/dataviz/examples/report-card/empowerment-metric/DualRadialGauge.stories.tsx new file mode 100644 index 00000000..177d51e3 --- /dev/null +++ b/packages/dataviz/examples/report-card/empowerment-metric/DualRadialGauge.stories.tsx @@ -0,0 +1,212 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { + RadialBar, + RadialBarCircle, + RadialBarSweep, + RadialBarUnitLabel, + RadialBarScale, + RadialBarUnits, + useResponsiveChart, +} from '../../../src'; + +const Neutral70 = '#EBECF0'; +const Purple600 = '#5243AA'; +const Purple200 = '#C0B6F2'; + +const Neutral400 = '#42526E'; +const Neutral100 = '#6B778C'; +const FontWeightNormal = 400; +const FontWeightBold = 600; + +const unitLabelStyle = (at: number, value: number) => { + const isPrimaryValue = at === value; + const fontWeight = isPrimaryValue ? FontWeightBold : FontWeightNormal; + const fill = isPrimaryValue ? Neutral400 : Neutral100; + return { + fontFamily: '"Inter"', + fontSize: '16px', + fontStyle: 'normal', + fontWeight, + fill, + }; +}; + +const ReportCardEmpowermentMetricDualRadialGauge = (props: { + valueMin: number; + valueMax: number; + // current week + valuePrimary: number; + radiusPrimary: number; + radiusRatioPrimary: number; + // previous week + valueSecondary: number; + radiusSecondary: number; + radiusRatioSecondary: number; + // extra + unitsOffset?: number; + cornerRadius?: string | number; +}) => { + const { + valueMin, + valueMax, + valuePrimary, + valueSecondary, + radiusPrimary, + radiusRatioPrimary, + radiusSecondary, + radiusRatioSecondary, + unitsOffset, + cornerRadius, + } = props; + + const labelFontSize = 16; + const labelOffset = 8; + const labelLength = 70; + const marginTop = 8 + labelOffset + labelFontSize; + const marginRight = 8 + labelOffset + labelLength; + const marginBottom = 8 + labelFontSize / 2; + const marginLeft = 8 + labelOffset + labelLength; + const innerWidth = radiusPrimary * 2; + const innerHeight = radiusPrimary; + const height = innerHeight + marginTop + marginBottom; + + const chart = useResponsiveChart({ + height, + innerWidth, + innerHeight, + marginBottom, + marginLeft, + marginRight, + marginTop, + }); + + return ( +
+ + {/* inner */} + + {/* inner-center */} + + {/* center-radial-bar */} + + + + + + + + Too easy + + + Just right + + + Too hard + + + + + + + + + + + + +
+ ); +}; + +const meta: Meta = { + title: 'Examples/Report Card/Empowerment Metric/DualRadialGauge', + component: ReportCardEmpowermentMetricDualRadialGauge, + args: { + valueMin: 1, + valueMax: 3, + valuePrimary: 2, + valueSecondary: 3, + radiusPrimary: 126, + radiusRatioPrimary: 0.77, + radiusSecondary: 93, + radiusRatioSecondary: 0.87, + unitsOffset: 8, + cornerRadius: '50%', + }, + argTypes: { + valuePrimary: { + control: { + type: 'range', + min: 1, + max: 3, + step: 1, + }, + }, + valueSecondary: { + control: { + type: 'range', + min: 1, + max: 3, + step: 1, + }, + }, + unitsOffset: { + control: { + type: 'range', + min: 0, + max: 16, + step: 1, + }, + }, + cornerRadius: { + control: { + type: 'text', + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Example: Story = {}; diff --git a/packages/dataviz/examples/report-card/empowerment-metric/SegmentedCircularGauge.stories.tsx b/packages/dataviz/examples/report-card/empowerment-metric/SegmentedCircularGauge.stories.tsx new file mode 100644 index 00000000..852c47ec --- /dev/null +++ b/packages/dataviz/examples/report-card/empowerment-metric/SegmentedCircularGauge.stories.tsx @@ -0,0 +1,223 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { + RadialBar, + RadialBarSegments, + RadialBarSegmentsSweep, + RadialBarScale, + LinearScale, + LinearUnits, + LinearUnitLabel, + useResponsiveChart, +} from '../../../src'; + +const Neutral400 = '#42526E'; +const Neutral100 = '#6B778C'; +const FontWeightNormal = 400; +const FontWeightBold = 600; + +const unitLabelStyle = (at: number, value: number) => { + const isPrimaryValue = at === value; + const fontWeight = isPrimaryValue ? FontWeightBold : FontWeightNormal; + const fill = isPrimaryValue ? Neutral400 : Neutral100; + return { + fontFamily: '"Inter"', + fontSize: '16px', + fontStyle: 'normal', + fontWeight, + fill, + }; +}; + +const ReportCardEmpowermentMetricSegmentedCircularGauge = (props: { + valueMin: number; + valueMax: number; + value: number; + valueContinuous: number; + radius: number; + radiusRatio: number; + segments: number; + padAngle: number; + cornerRadius: number | string; +}) => { + const { + valueMin, + valueMax, + value, + valueContinuous, + radius, + radiusRatio, + segments, + padAngle, + cornerRadius, + } = props; + + const startAngleOffset = 0; // -0.05; + + const Neutral80 = '#DFE1E6'; + const Yellow300 = '#FFE380'; + const Yellow500 = '#FFAB00'; + + const scaleGap = 32; + const fontSize = 16; + const marginTop = 8; + const marginRight = 8; + const marginBottom = 8 + scaleGap + fontSize; + const marginLeft = 8; + const innerWidth = radius * 2; + const innerHeight = radius * 2; + const height = innerHeight + marginTop + marginBottom; + + const chart = useResponsiveChart({ + height, + innerWidth, + marginBottom, + marginLeft, + marginRight, + marginTop, + }); + + return ( +
+ + {/* inner */} + + {/* inner-center */} + + {/* center-radial-bar */} + + + + + + + + + + + + + + + {/* y-scale-offset */} + + + + + Not really + + + Kind of + + + A lot + + + + + + +
+ ); +}; + +const meta: Meta = { + title: 'Examples/Report Card/Empowerment Metric/SegmentedCircularGauge', + component: ReportCardEmpowermentMetricSegmentedCircularGauge, + args: { + valueMin: 1, + valueMax: 3, + value: 2, + radius: 100, + radiusRatio: 0.74, + padAngle: 0.042, + cornerRadius: '1.5px', + segments: 52, + valueContinuous: 0.9, + }, + argTypes: { + value: { + control: { + type: 'range', + min: 1, + max: 3, + step: 1, + }, + }, + valueContinuous: { + control: { + type: 'range', + min: 0.9, + max: 3, + step: 0.1, + }, + }, + radius: { + control: { + type: 'range', + min: 1, + max: 100, + step: 1, + }, + }, + radiusRatio: { + control: { + type: 'range', + min: 0, + max: 1, + step: 0.01, + }, + }, + padAngle: { + control: { + type: 'range', + min: 0, + max: 0.1, + step: 0.001, + }, + }, + segments: { + control: { + type: 'range', + min: 1, + max: 52, + step: 1, + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Example: Story = {}; diff --git a/packages/dataviz/examples/report-card/mastery-goal/DualCircularGauge.stories.tsx b/packages/dataviz/examples/report-card/mastery-goal/DualCircularGauge.stories.tsx new file mode 100644 index 00000000..9bddb393 --- /dev/null +++ b/packages/dataviz/examples/report-card/mastery-goal/DualCircularGauge.stories.tsx @@ -0,0 +1,200 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { RadialBar, RadialBarSweep, RadialBarScale, Chart } from '../../../src'; + +const ReportCardMasteryGoalDualCircularGauge = (props: { + valueMin: number; + valueMax: number; + valuePrimary: number; + valueSecondary: number; + radiusPrimary: number; + radiusRatioPrimary: number; + radiusSecondary: number; + radiusRatioSecondary: number; + goalStatus: 'on-track' | 'off-track'; + // extra + cornerRadius?: string | number; +}) => { + const { + valueMin, + valueMax, + valuePrimary, + valueSecondary, + radiusPrimary, + radiusRatioPrimary, + radiusSecondary, + radiusRatioSecondary, + goalStatus, + cornerRadius, + } = props; + + const Neutral70 = '#EBECF0'; + const Neutral80 = '#DFE1E6'; + const Neutral90 = '#C1C7D0'; + const Neutral300 = '#505F79'; + const Green400 = '#57D9A3'; + const Yellow400 = '#FFC400'; + + const primaryValueSweepFill = + goalStatus === 'on-track' ? Green400 : Yellow400; + + const Neutral600 = '#091E42'; + + const styleT22 = { + fill: Neutral600, + fontFamily: 'Poppins', + fontSize: '22px', + fontStyle: 'normal', + fontWeight: 600, + letterSpacing: -0.01, + }; + + const styleDescription = { + fill: Neutral300, + fontFamily: 'Inter', + fontSize: '14px', + fontStyle: 'normal', + fontWeight: 400, + }; + + return ( + + {/* center-radial-bar */} + + + + + + + + + + + + + + + {valuePrimary}/{valueMax} + + + badges + + + {valuePrimary > valueSecondary ? 'Ahead' : 'Behind'} by + + + {Math.abs(valuePrimary - valueSecondary)} badges + + + + + + ); +}; + +const meta: Meta = { + title: 'Examples/Report Card/Mastery Goal/DualCircularGauge', + component: ReportCardMasteryGoalDualCircularGauge, + args: { + valueMin: 0, + valueMax: 120, + valuePrimary: 105, + valueSecondary: 103, + radiusPrimary: 126, + radiusRatioPrimary: 0.77, + radiusSecondary: 93, + radiusRatioSecondary: 0.87, + goalStatus: 'on-track', + cornerRadius: '50%', + }, + argTypes: { + valuePrimary: { + control: { + type: 'range', + min: 0, + max: 120, + step: 1, + }, + }, + valueSecondary: { + control: { + type: 'range', + min: 0, + max: 120, + step: 1, + }, + }, + goalStatus: { + options: ['on-track', 'off-track'], + control: { + type: 'radio', + }, + }, + radiusPrimary: { + control: { + type: 'range', + min: 0, + max: 126, + step: 1, + }, + }, + radiusRatioPrimary: { + control: { + type: 'range', + min: 0, + max: 1, + step: 0.01, + }, + }, + radiusSecondary: { + control: { + type: 'range', + min: 0, + max: 126, + step: 1, + }, + }, + radiusRatioSecondary: { + control: { + type: 'range', + min: 0, + max: 1, + step: 0.01, + }, + }, + cornerRadius: { + control: { + type: 'text', + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Example: Story = {}; diff --git a/packages/dataviz/examples/report-card/portfolio/BarChart.stories.tsx b/packages/dataviz/examples/report-card/portfolio/BarChart.stories.tsx new file mode 100644 index 00000000..3a020c6b --- /dev/null +++ b/packages/dataviz/examples/report-card/portfolio/BarChart.stories.tsx @@ -0,0 +1,168 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { + BarScale, + Bar, + BarFill, + BarLabel, + BarLabelProps, + useResponsiveChart, +} from '../../../src'; + +const BrandBlue = '#0A4872'; +const Teal200 = '#B3F5FF'; +const Teal300 = '#79E2F2'; +const Teal400 = '#00C7E6'; +const Teal500 = '#00B8D9'; +const Teal600 = '#00A3BF'; +const Teal700 = '#008DA6'; + +const styleBody = { + fill: BrandBlue, + fontFamily: 'Inter', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 400, +}; + +const ReportCardPortfolioBarChart = (props: { + data: { value: number; label: string }[]; + valueMin: number; + colors: string[]; + barThickness: number; + barGapRatio: number; + barLabelPosition: BarLabelProps['position']; + barLabelOffset: BarLabelProps['offset']; + // extra + width: number; + height: number; + 'data.0.value': number; +}) => { + const { + data: dataProp, + valueMin, + colors, + barThickness, + barGapRatio, + barLabelPosition, + barLabelOffset, + // extra + width, + height: heightProp, + } = props; + + const data = dataProp + .map((datum, i) => { + // @ts-expect-error blah + const value = (props['data.' + i + '.value'] as number) ?? datum.value; + return { ...datum, value }; + }) + .sort((a, b) => b.value - a.value); + const values = data.map((d) => d.value); + const valueMax = Math.max(...values); + // const lengthMax = width; + + const gap = barThickness * barGapRatio; + + const gdy = + barLabelPosition === 'above' ? 24 : barLabelPosition === 'below' ? 0 : 0; + + const marginTop = 8 + gdy; + const marginRight = 8; + const marginBottom = 8; + const marginLeft = 8; + const innerHeight = heightProp - gdy; + const height = innerHeight + marginTop + marginBottom; + // const minInnerWidth = 140; + + const chart = useResponsiveChart({ + height, + innerHeight, + marginBottom, + marginLeft, + marginRight, + marginTop, + }); + + return ( +
+ + {/* inner */} + + + {data.map((datum, i) => ( + + + + {datum.label} ({datum.value}) + + + ))} + + + +
+ ); +}; + +const meta: Meta = { + title: 'Examples/Report Card/Portfolio/BarChart', + component: ReportCardPortfolioBarChart, + args: { + data: [ + { value: 17, label: 'Social Studies' }, + { value: 15, label: 'Science' }, + { value: 12, label: 'Reading' }, + { value: 8, label: 'Other' }, + { value: 6, label: 'Art' }, + { value: 3, label: 'Music' }, + ], + valueMin: 0, + colors: [Teal700, Teal600, Teal500, Teal400, Teal300, Teal200], + barThickness: 40, + barGapRatio: (24 + 20) / 40, + barLabelPosition: 'above', + barLabelOffset: 6, + // extra + height: 484, + width: 320, + 'data.0.value': 17, + }, + argTypes: { + data: { control: { type: 'object' } }, + valueMin: { control: { type: 'range', min: 0, max: 100, step: 1 } }, + colors: { control: { type: 'object' } }, + barThickness: { control: { type: 'range', min: 0, max: 40, step: 1 } }, + barGapRatio: { control: { type: 'range', min: 0, max: 2, step: 0.1 } }, + barLabelPosition: { + options: ['above', 'below', 'inside'], + control: { type: 'radio' }, + }, + barLabelOffset: { + control: { type: 'range', min: -20, max: 20, step: 1 }, + }, + // extra + height: { control: { type: 'range', min: 0, max: 484, step: 1 } }, + width: { control: { type: 'range', min: 0, max: 320, step: 1 } }, + 'data.0.value': { control: { type: 'range', min: 0, max: 50, step: 1 } }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Example: Story = {}; diff --git a/packages/dataviz/src/ResponsiveChart/useResponsiveChart.ts b/packages/dataviz/src/ResponsiveChart/useResponsiveChart.ts index c61318f7..b5363f40 100644 --- a/packages/dataviz/src/ResponsiveChart/useResponsiveChart.ts +++ b/packages/dataviz/src/ResponsiveChart/useResponsiveChart.ts @@ -128,7 +128,6 @@ export const useResponsiveChart = ( }, }; - console.log('useResponsiveChart', { container, svg, inner }); return { container, svg,