feat: add StackedHorizontalBarChart

packages/frosted-ui/.storybook/stories/components/stacked-horizontal-bar-chart.stories.tsx

@@ -0,0 +1,167 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import React from 'react';
+import {
+  Card,
+  Flex,
+  SegmentedControl,
+  Separator,
+  StackedHorizontalBarChart,
+  Text,
+} from '../../../src/components';
+import type { StackedHorizontalBarChartProps } from '../../../src/components/stacked-horizontal-bar-chart';
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Data presentation/StackedHorizontalBarChart',
+  component: StackedHorizontalBarChart,
+  args: {},
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+} satisfies Meta<typeof StackedHorizontalBarChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+export const Default: Story = {
+  args: {
+    data: [
+      { label: 'Nitrogen', value: 78, color: 'amber' },
+      { label: 'Oxygen', value: 20.9, color: 'green' },
+      { label: 'Argon', value: 0.9, color: 'sky' },
+      { label: 'Other gasses', value: 0.17, color: 'blue' },
+      { label: 'Carbon Dioxide', value: 0.03, color: 'danger' },
+    ],
+  },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <StackedHorizontalBarChart {...args} />
+    </div>
+  ),
+};
+
+export const CustomLabel: Story = {
+  name: 'Custom label',
+  args: {
+    data: [
+      {
+        label: (value, percent) => `Successful: ${value} (${percent})`,
+        value: 481,
+        color: 'success',
+      },
+      {
+        label: (value, percent) => `Past: ${value} (${percent})`,
+        value: 202,
+        color: 'sky',
+      },
+      {
+        label: (value, percent) => `Due: ${value} (${percent})`,
+        value: 534,
+        color: 'purple',
+      },
+      {
+        label: (value, percent) => `Failed: ${value} (${percent})`,
+        value: 495,
+        color: 'danger',
+      },
+      {
+        label: (value, percent) => `Refunded: ${value} (${percent})`,
+        value: 128,
+        color: 'warning',
+      },
+    ],
+  },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <StackedHorizontalBarChart {...args} />
+    </div>
+  ),
+};
+
+export const Animated: Story = {
+  args: {
+    data: [],
+  },
+  render: () => {
+    type LibraryType = 'FrostedUI' | 'BaseUI' | 'React95';
+
+    const uiLibariesData = {
+      FrostedUI: [
+        { label: 'Typescript', value: 75.9, color: 'success' },
+        { label: 'CSS', value: 22.9, color: 'warning' },
+        { label: 'Other', value: 1.2, color: 'danger' },
+      ],
+      BaseUI: [
+        { label: 'Typescript', value: 50.5, color: 'success' },
+        { label: 'CSS', value: 40, color: 'warning' },
+        { label: 'Other', value: 9.5, color: 'danger' },
+      ],
+      React95: [
+        { label: 'Typescript', value: 98.8, color: 'success' },
+        { label: 'CSS', value: 1.1, color: 'warning' },
+        { label: 'Other', value: 0.1, color: 'danger' },
+      ],
+    } satisfies Record<LibraryType, StackedHorizontalBarChartProps['data']>;
+    const [state, setState] = React.useState<LibraryType>('FrostedUI');
+
+    const data = uiLibariesData[state];
+
+    return (
+      <Card
+        size="3"
+        variant="surface"
+        style={{
+          backgroundImage: `linear-gradient(var(--color-panel-elevation-a3), var(--color-panel-elevation-a3))`,
+        }}
+      >
+        <div style={{ width: 300 }}>
+          <SegmentedControl.Root
+            value={state}
+            onValueChange={(value) => setState(value as LibraryType)}
+          >
+            <SegmentedControl.List>
+              <SegmentedControl.Trigger value="FrostedUI">
+                Frosted UI
+              </SegmentedControl.Trigger>
+              <SegmentedControl.Trigger value="BaseUI">
+                Base UI
+              </SegmentedControl.Trigger>
+              <SegmentedControl.Trigger value="React95">
+                React95
+              </SegmentedControl.Trigger>
+            </SegmentedControl.List>
+          </SegmentedControl.Root>
+          <StackedHorizontalBarChart data={data} mt={'8'} mb={'4'} />
+          <Flex direction={'column'} gap={'3'}>
+            {data.map((dataPoint, i) => (
+              <>
+                {i !== 0 && <Separator size="4" orientation="horizontal" />}
+                <Flex align="center" justify="between" key={dataPoint.label}>
+                  <Flex align="center" gap="2">
+                    <div
+                      style={{
+                        width: 'var(--space-3)',
+                        height: 'var(--space-1)',
+                        borderRadius: 3,
+                        backgroundColor: `var(--${dataPoint.color}-9)`,
+                      }}
+                    />
+                    <Text size="2" color="gray">
+                      {dataPoint.label}
+                    </Text>
+                  </Flex>
+                  <Text size="2">{dataPoint.value}%</Text>
+                </Flex>
+              </>
+            ))}
+          </Flex>
+        </div>
+      </Card>
+    );
+  },
+};

packages/frosted-ui/.storybook/stories/components/table.stories.tsx

@@ -6,7 +6,7 @@ import { tableRootPropDefs } from '../../../src/components/table.props';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
-  title: 'Components/Table',
+  title: 'Data presentation/Table',
   component: Table.Root,
   args: {
     size: tableRootPropDefs.size.default,

packages/frosted-ui/src/components/index.ts

@@ -152,6 +152,7 @@ export {
   PopoverTrigger,
 } from './popover';
 export * from './popover.props';
+export { StackedHorizontalBarChart } from './stacked-horizontal-bar-chart';
 export { Tooltip } from './tooltip';
 export * from './tooltip.props';
 

packages/frosted-ui/src/components/stacked-horizontal-bar-chart.css

@@ -0,0 +1,41 @@
+.fui-StackedHorizontalBarChart {
+  display: flex;
+  gap: var(--space-1);
+  height: 12px;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  border-radius: var(--radius-2);
+}
+
+.fui-StackedHorizontalBarChartBar {
+  height: 100%;
+  background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.15) 0%,
+      rgba(0, 0, 0, 0.15) 100%
+    ),
+    var(--accent-9);
+  transition: 0.2s width cubic-bezier(0.33, 1, 0.68, 1);
+  min-width: 2px;
+  border-radius: 1px;
+}
+
+.fui-StackedHorizontalBarChartTooltip {
+  position: relative;
+}
+
+.fui-StackedHorizontalBarChartTooltip::after {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    transparent,
+    var(--accent-a4)
+  );
+  mix-blend-mode: overlay;
+  pointer-events: none;
+}

packages/frosted-ui/src/components/stacked-horizontal-bar-chart.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import classNames from 'classnames';
+import * as React from 'react';
+import type { MarginProps } from '../helpers';
+import { colorProp, extractMarginProps, withMarginProps } from '../helpers';
+import { Tooltip } from './tooltip';
+
+type StackedHorizontalBarChartData = {
+  label: string | ((value: number, percent: string) => string); // label or function to generate label
+  value: number; // Numeric value for the bar
+  color: (typeof colorProp.values)[number]; // Color for the bar
+};
+
+type StackedHorizontalBarChartElement = React.ElementRef<'div'>;
+interface StackedHorizontalBarChartOwnProps
+  extends React.ComponentPropsWithoutRef<'div'> {}
+
+interface StackedHorizontalBarChartProps
+  extends React.ComponentPropsWithoutRef<'div'>,
+    MarginProps,
+    StackedHorizontalBarChartOwnProps {
+  data: StackedHorizontalBarChartData[];
+}
+
+const StackedHorizontalBarChart = React.forwardRef<
+  StackedHorizontalBarChartElement,
+  StackedHorizontalBarChartProps
+>((props, forwardedRef) => {
+  const { rest: marginRest, ...marginProps } = extractMarginProps(props);
+  const { className, data, ...rootProps } = marginRest;
+
+  const sum = data.reduce((acc, dataPoint) => acc + dataPoint.value, 0);
+
+  return (
+    <div
+      {...rootProps}
+      ref={forwardedRef}
+      className={classNames(
+        'fui-StackedHorizontalBarChart',
+        className,
+        withMarginProps(marginProps),
+      )}
+    >
+      {data.map((dataPoint, i) => {
+        // Round to max 2 decimal places
+        const percent = `${
+          Math.round((dataPoint.value / sum) * 100 * 100) / 100
+        }%`;
+        const label =
+          typeof dataPoint.label === 'string'
+            ? dataPoint.label
+            : dataPoint.label(dataPoint.value, percent);
+
+        const ariaLabel =
+          typeof dataPoint.label === 'string'
+            ? `${dataPoint.label} ${percent}`
+            : label;
+
+        return (
+          <Tooltip
+            content={label}
+            key={i}
+            delayDuration={150}
+            className="fui-StackedHorizontalBarChartTooltip"
+            data-accent-color={dataPoint.color}
+          >
+            <div
+              data-accent-color={dataPoint.color}
+              aria-label={ariaLabel}
+              className="fui-StackedHorizontalBarChartBar"
+              style={{ width: percent }}
+            />
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+});
+
+StackedHorizontalBarChart.displayName = 'StackedHorizontalBarChart';
+
+export { StackedHorizontalBarChart };
+export type { StackedHorizontalBarChartProps };

packages/frosted-ui/src/styles/index.css

@@ -47,6 +47,7 @@
 @import '../components/separator.css';
 @import '../components/lab/skeleton.css';
 @import '../components/slider.css';
+@import '../components/stacked-horizontal-bar-chart.css';
 @import '../components/strong.css';
 @import '../components/switch.css';
 @import '../components/tabs.css';