temp

packages/components/examples/report-card/empowerment-metric/segmented-circular-gauge.stories.tsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Arc,
+  ArcSegments,
+  ArcSegmentsSweep,
+  ArcUnitLabel,
+  Arcs,
+  Chart,
+} 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';
+
+  return (
+    <Chart
+      width={200 + 68 + 68}
+      height={200 + 28 + 28}
+      marginBottom={28}
+      marginLeft={68}
+      marginRight={68}
+      marginTop={28}
+    >
+      <Arcs
+        angleMin={0 + startAngleOffset}
+        angleMax={2 * Math.PI + startAngleOffset}
+        valueMin={valueMin}
+        valueMax={valueMax}
+      >
+        <Arc radius={radius} ratio={radiusRatio}>
+          <ArcSegments
+            count={segments}
+            padAngle={padAngle}
+            cornerRadius={cornerRadius}
+          >
+            <ArcSegmentsSweep renderProps={{ style: { fill: Neutral80 } }} />
+            <ArcSegmentsSweep
+              to={valueContinuous === 0.9 ? value : valueContinuous}
+              renderProps={{ style: { fill: Yellow500 } }}
+            />
+          </ArcSegments>
+          <ArcUnitLabel at={1 + 0.1} dx={12} style={unitLabelStyle(1, value)}>
+            Sad
+          </ArcUnitLabel>
+          <ArcUnitLabel at={2} style={unitLabelStyle(2, value)}>
+            Fair
+          </ArcUnitLabel>
+          <ArcUnitLabel
+            at={3}
+            textAnchor="middle"
+            dominantBaseline="hanging"
+            style={unitLabelStyle(3, value)}
+          >
+            Okay
+          </ArcUnitLabel>
+          <ArcUnitLabel at={4} style={unitLabelStyle(4, value)}>
+            Good
+          </ArcUnitLabel>
+          <ArcUnitLabel at={5 - 0.1} dx={-4} style={unitLabelStyle(5, value)}>
+            Happy
+          </ArcUnitLabel>
+        </Arc>
+      </Arcs>
+      <g>
+        <circle r={118 / 2} fill={Yellow300} />
+      </g>
+    </Chart>
+  );
+};
+
+const meta: Meta<typeof ReportCardEmpowermentMetricSegmentedCircularGauge> = {
+  title: 'Examples/Report Card/Empowerment Metric/SegmentedCircularGauge',
+  component: ReportCardEmpowermentMetricSegmentedCircularGauge,
+  args: {
+    valueMin: 1,
+    valueMax: 5,
+    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: 5,
+        step: 1,
+      },
+    },
+    valueContinuous: {
+      control: {
+        type: 'range',
+        min: 0.9,
+        max: 5,
+        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<typeof Chart>;
+
+export const Example: Story = {};

packages/components/src/Arc/Arc.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import { Arc } from './Arc';
 import { ArcSweep } from '../ArcSweep';
 import { Chart } from '../Chart';

packages/components/src/ArcCircle/ArcCircle.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import { ArcCircle } from './ArcCircle';
 import { Chart } from '../Chart';
 import { generateArc } from '../Arc/generateArc';

packages/components/src/ArcSegments/ArcSegments.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { ArcSegments } from './ArcSegments';
+import { ArcSegmentsSweep } from '../ArcSegmentsSweep';
+import { Chart } from '../Chart';
+import { generateArc } from '../Arc/generateArc';
+
+const dim = 252 as const;
+
+const meta: Meta<typeof ArcSegments> = {
+  title: 'ArcSegments',
+  component: ArcSegments,
+  decorators: (Story) => (
+    <Chart width={dim} height={dim}>
+      <Story />
+    </Chart>
+  ),
+  argTypes: {
+    padAngle: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 0.5,
+        step: 0.005,
+      },
+    },
+    count: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 50,
+        step: 1,
+      },
+    },
+    cornerRadius: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ArcSegments>;
+
+const circularArc = generateArc({
+  valueMin: 0,
+  valueMax: 126,
+  angleMin: 0,
+  angleMax: 2 * Math.PI,
+  radius: 126,
+  ratio: 0.77,
+  cornerRadius: '50%',
+});
+
+export const Circular: Story = {
+  args: {
+    arc: circularArc,
+    padAngle: 0.05,
+    count: 20,
+    cornerRadius: '2px',
+    children: [
+      <ArcSegmentsSweep key="0" to={120} />,
+      <ArcSegmentsSweep key="1" to={85} />,
+    ],
+  },
+};
+
+const radialArc = generateArc({
+  valueMin: 1,
+  valueMax: 3,
+  angleMin: (-1 * Math.PI) / 2,
+  angleMax: Math.PI / 2,
+  radius: 126,
+  ratio: 0.77,
+  cornerRadius: '50%',
+});
+
+export const Radial: Story = {
+  args: {
+    arc: radialArc,
+    padAngle: 0.05,
+    count: 20,
+    cornerRadius: '2px',
+    children: [
+      <ArcSegmentsSweep key="0" to={3} />,
+      <ArcSegmentsSweep key="1" to={2} />,
+    ],
+  },
+};

packages/components/src/ArcSegments/ArcSegments.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ArcSegmentsProps } from './ArcSegmentsProp';
+import { generateArcSegments } from './generateArcSegments';
+
+export const ArcSegments = (props: ArcSegmentsProps) => {
+  const { arc, children, cornerRadius, count, padAngle } = props;
+
+  if (arc === undefined) {
+    throw Error(
+      'Oops! `ArcSegments` received `arc: undefined`. Did you mean to either (1) render as a child of `Arc`? or (2) pass `arc` from `generateArc`?'
+    );
+  }
+
+  const arcSegments = generateArcSegments({
+    count,
+    padAngle,
+    cornerRadius,
+  });
+
+  const extraProps = { arc: Object.assign(arc, { segments: arcSegments }) };
+
+  return React.Children.map(children, (child) => {
+    // @ts-expect-error TODO
+    return React.cloneElement(child, extraProps);
+  });
+};

packages/components/src/ArcSegments/ArcSegmentsProp.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { ArcOut } from '../Arc/generateArc';
+
+export interface ArcSegmentsProps {
+  /**
+   * The number of segments in the arc.
+   */
+  count: number;
+  /**
+   * The angular separation in radians between adjacent segments.
+   */
+  padAngle: number;
+  /**
+   * The default corner radius of any segment located on this arc.
+   */
+  cornerRadius?: number | string;
+  /**
+   * The arc on which the segments are located.
+   */
+  arc?: ArcOut;
+  children: ReactNode;
+}

packages/components/src/ArcSegments/generateArcSegments.ts

@@ -0,0 +1,21 @@
+export type ArcsSegmentsIn = {
+  count: number;
+  padAngle: number;
+  cornerRadius?: number | string;
+};
+
+export type ArcSegmentsOut = {
+  count: number;
+  padAngle: number;
+  cornerRadius?: number | string;
+};
+
+export function generateArcSegments(params: ArcsSegmentsIn): ArcSegmentsOut {
+  const arcSegments = {
+    count: params.count,
+    padAngle: params.padAngle,
+    cornerRadius: params.cornerRadius,
+  };
+
+  return arcSegments;
+}

packages/components/src/ArcSegments/index.ts

@@ -0,0 +1,3 @@
+export * from './ArcSegments';
+export * from './ArcSegmentsProp';
+export * from './generateArcSegments';