[86by6f2gg][d3-chart] added compact horizontal bar chart

semcore/d3-chart/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.50.0] - 2024-06-28
+
+### Added
+
+- `CompactHorizontalBar` chart.
+
 ## [3.49.0] - 2024-07-13
 
 ### Changed

semcore/d3-chart/__tests__/index.test.tsx

@@ -22,6 +22,7 @@ import {
   Line,
   Donut,
   HorizontalBar,
+  CompactHorizontalBar,
   GroupBar,
   minMax,
   Area,
@@ -2638,6 +2639,85 @@ describe('d3 charts visual regression', () => {
 
     await expect(await snapshot(<Component />)).toMatchImageSnapshot(task);
   });
+
+  test.concurrent('should render Compact horizontal bar chart', async ({ task }) => {
+    const data = [
+      {
+        category: 'Schema.org (Microdata)',
+        value: 0,
+      },
+      {
+        category: 'Open graph',
+        value: 9650,
+      },
+      {
+        category: 'Twitter cards',
+        value: 7650,
+      },
+      {
+        category: 'Microformats',
+        value: 14650,
+      },
+      {
+        category: 'Schema.org (JSON-LD)',
+        value: 135650,
+      },
+    ];
+
+    const Component: React.FC = () => {
+      const MARGIN = 30;
+      const width = 500;
+      const height = 500;
+
+      const sum = data.reduce((acc, d) => acc + d.value, 0);
+
+      const xScale = scaleLinear().range([0, width]).domain([0, sum]);
+
+      const yScale = scaleBand()
+        .range([height - MARGIN, MARGIN])
+        .domain([...data].reverse().map((d) => d.category))
+        .paddingInner(0.6)
+        .paddingOuter(0.2);
+
+      return (
+        <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>
+          <CompactHorizontalBar x='value' y='category'>
+            <CompactHorizontalBar.Hover />
+            <CompactHorizontalBar.Tooltip>
+              {({ index }: any) => {
+                return {
+                  children: (
+                    <>
+                      <CompactHorizontalBar.Tooltip.Title>
+                        {data[index].category}
+                      </CompactHorizontalBar.Tooltip.Title>
+                      <Flex justifyContent='space-between'>
+                        <CompactHorizontalBar.Tooltip.Dot mr={4}>
+                          Bar
+                        </CompactHorizontalBar.Tooltip.Dot>
+                        <Text bold>{data[index].value}</Text>
+                      </Flex>
+                    </>
+                  ),
+                };
+              }}
+            </CompactHorizontalBar.Tooltip>
+            <CompactHorizontalBar.Annotation>
+              <CompactHorizontalBar.Label />
+              <CompactHorizontalBar.Percent />
+              <CompactHorizontalBar.Value />
+            </CompactHorizontalBar.Annotation>
+            <CompactHorizontalBar.Bar>
+              <CompactHorizontalBar.Bar.Background />
+              <CompactHorizontalBar.Bar.Fill />
+            </CompactHorizontalBar.Bar>
+          </CompactHorizontalBar>
+        </Plot>
+      );
+    };
+
+    await expect(await snapshot(<Component />)).toMatchImageSnapshot(task);
+  });
 });
 
 describe('Focus skip to content after plot', () => {