[d3-chart] renamed distribution bar chart to cigarette pack chart

semrush · Jul 4, 2024 · 49d4774 · 49d4774
1 parent 55e1fda
commit 49d4774
Show file tree

Hide file tree

Showing 31 changed files with 238 additions and 266 deletions.
diff --git a/semcore/d3-chart/CHANGELOG.md b/semcore/d3-chart/CHANGELOG.md
@@ -2,12 +2,14 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+
 ## [3.49.0] - 2024-06-28
 
 ### Added
 
 * `CigarettePack` chart.
 
+
 ## [3.48.0] - 2024-06-19
 
 ### Added
@@ -146,12 +148,14 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
 
 * Version patch update due to children dependencies update (`@semcore/animation` [2.22.0 ~> 2.22.1], `@semcore/popper` [5.27.0 ~> 5.27.1], `@semcore/utils` [4.23.0 ~> 4.23.1], `@semcore/core` [2.20.0 ~> 2.20.1]).
 
+
 ## [3.38.0] - 2024-04-12
 
 ### Added
 
 * `Cigarette` chart.
 
+
 ## [3.37.4] - 2024-04-12
 
 ### Fixed

diff --git a/semcore/d3-chart/__tests__/index.test.tsx b/semcore/d3-chart/__tests__/index.test.tsx
@@ -22,7 +22,7 @@ import {
   Line,
   Donut,
   HorizontalBar,
-  DistributionBar,
+  CigarettesPack,
   GroupBar,
   minMax,
   Area,
@@ -2640,7 +2640,7 @@ describe('d3 charts visual regression', () => {
     await expect(await snapshot(<Component />)).toMatchImageSnapshot(task);
   });
 
-  test.concurrent('should render distribution bar chart', async ({ task }) => {
+  test.concurrent('should render cigarettes pack chart', async ({ task }) => {
     const data = [
       {
         category: 'Schema.org (Microdata)',
@@ -2681,35 +2681,35 @@ describe('d3 charts visual regression', () => {
 
       return (
         <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>
-          <DistributionBar x='value' y='category'>
-            <DistributionBar.Hover />
-            <DistributionBar.Tooltip>
+          <CigarettesPack x='value' y='category'>
+            <CigarettesPack.Hover />
+            <CigarettesPack.Tooltip>
               {({ index }: any) => {
                 return {
                   children: (
                     <>
-                      <DistributionBar.Tooltip.Title>
+                      <CigarettesPack.Tooltip.Title>
                         {data[index].category}
-                      </DistributionBar.Tooltip.Title>
+                      </CigarettesPack.Tooltip.Title>
                       <Flex justifyContent='space-between'>
-                        <DistributionBar.Tooltip.Dot mr={4}>Bar</DistributionBar.Tooltip.Dot>
+                        <CigarettesPack.Tooltip.Dot mr={4}>Bar</CigarettesPack.Tooltip.Dot>
                         <Text bold>{data[index].value}</Text>
                       </Flex>
                     </>
                   ),
                 };
               }}
-            </DistributionBar.Tooltip>
-            <DistributionBar.Annotation>
-              <DistributionBar.Label />
-              <DistributionBar.Percent />
-              <DistributionBar.Value />
-            </DistributionBar.Annotation>
-            <DistributionBar.Bar>
-              <DistributionBar.Bar.Background />
-              <DistributionBar.Bar.Fill />
-            </DistributionBar.Bar>
-          </DistributionBar>
+            </CigarettesPack.Tooltip>
+            <CigarettesPack.Annotation>
+              <CigarettesPack.Label />
+              <CigarettesPack.Percent />
+              <CigarettesPack.Value />
+            </CigarettesPack.Annotation>
+            <CigarettesPack.Bar>
+              <CigarettesPack.Bar.Background />
+              <CigarettesPack.Bar.Fill />
+            </CigarettesPack.Bar>
+          </CigarettesPack>
         </Plot>
       );
     };
@@ -2951,10 +2951,10 @@ describe('patterns rendering', () => {
   });
 });
 
-describe('Cigarette chart', () => {
+describe('Cigarettes chart', () => {
   beforeEach(cleanup);
 
-  test.concurrent('Should render Cigarette', async ({ task }) => {
+  test.concurrent('Should render Cigarettes', async ({ task }) => {
     const data = {
       a: 3524,
       b: 1344,
@@ -2966,7 +2966,7 @@ describe('Cigarette chart', () => {
     const Component = () => {
       return (
         <Flex gap={8}>
-          <Chart.Cigarette
+          <Chart.Cigarettes
             data={data}
             plotWidth={280}
             header={
@@ -2979,7 +2979,7 @@ describe('Cigarette chart', () => {
             showTotalInTooltip={true}
           />
 
-          <Chart.Cigarette
+          <Chart.Cigarettes
             data={data}
             plotHeight={200}
             invertAxis={false}

diff --git a/semcore/d3-chart/src/DistributionBar.jsx → semcore/d3-chart/src/CigarettesPack.jsx b/semcore/d3-chart/src/DistributionBar.jsx → semcore/d3-chart/src/CigarettesPack.jsx
@@ -19,8 +19,8 @@ export const MIN_WIDTH = 4;
 const barHeight = 20;
 const hoverOffset = 6;
 
-class DistributionBarRoot extends Component {
-  static displayName = 'DistributionBar';
+class CigarettesPackRoot extends Component {
+  static displayName = 'CigarettesPack';
   static enhance = [uniqueIDEnhancement()];
   static style = style;
 
@@ -174,15 +174,15 @@ class DistributionBarRoot extends Component {
   }
 
   renderBar(d, i) {
-    const SDistributionBarGroup = this.Element;
+    const SCigarettesPackGroup = this.Element;
     const { styles, groupKey } = this.asProps;
     const { x, y } = this.computeBarData(d, i);
 
     this.asProps.dataHintsHandler.describeValueEntity(`${i}.${x}`, groupKey ?? d[y]);
 
     return (
       <React.Fragment key={`horizontal-bar-${i}`}>
-        {sstyled(styles)(<SDistributionBarGroup render='g' />)}
+        {sstyled(styles)(<SCigarettesPackGroup render='g' />)}
       </React.Fragment>
     );
   }
@@ -437,12 +437,12 @@ class Hover extends Component {
     const { styles, getBarData, render } = this.asProps;
     if (!render) return null;
     const { index } = this.state;
-    const SDistributionBarHoverRect = this.Element;
+    const SCigarettesPackHoverRect = this.Element;
 
     if (index === null) return null;
     const bar = getBarData(index);
     return sstyled(styles)(
-      <SDistributionBarHoverRect
+      <SCigarettesPackHoverRect
         render='rect'
         x={bar.x}
         y={bar.y + bar.height - barHeight - hoverOffset * 2}
@@ -453,19 +453,15 @@ class Hover extends Component {
   }
 }
 
-const DistributionBarTooltip = (props) => {
+const CigarettesPackTooltip = (props) => {
   if (!props.render) return null;
-  const SDistributionBarRadarTooltip = Root;
+  const SCigarettesPackRadarTooltip = Root;
   return sstyled(props.styles)(
-    <SDistributionBarRadarTooltip
-      render={Tooltip}
-      tag={DistributionBar.Hover}
-      excludeAnchorProps
-    />,
+    <SCigarettesPackRadarTooltip render={Tooltip} tag={CigarettesPack.Hover} excludeAnchorProps />,
   );
 };
 
-const DistributionBar = createElement(DistributionBarRoot, {
+const CigarettesPack = createElement(CigarettesPackRoot, {
   Annotation,
   Label,
   Percent,
@@ -478,7 +474,7 @@ const DistributionBar = createElement(DistributionBarRoot, {
     },
   ],
   Hover,
-  Tooltip: [DistributionBarTooltip, Tooltip._______childrenComponents],
+  Tooltip: [CigarettesPackTooltip, Tooltip._______childrenComponents],
 });
 
-export default DistributionBar;
+export default CigarettesPack;
diff --git a/.../component/Chart/DistributionBarChart.tsx → ...c/component/Chart/CigarettesPackChart.tsx b/.../component/Chart/DistributionBarChart.tsx → ...c/component/Chart/CigarettesPackChart.tsx
@@ -2,20 +2,20 @@ import React from 'react';
 import createComponent from '@semcore/core';
 import { BaseChartProps, BaseLegendProps } from './AbstractChart.type';
 import {
-  DistributionBarChartData,
-  DistributionBarChartProps,
-  DistributionBarChartType,
-} from './DistributionBarChart.type';
+  CigarettesPackChartData,
+  CigarettesPackChartProps,
+  CigarettesPackChartType,
+} from './CigarettesPackChart.type';
 import { scaleBand, scaleLinear } from 'd3-scale';
 // @ts-ignore
-import { DistributionBar } from '../..';
+import { CigarettesPack } from '../..';
 import { AbstractChart } from './AbstractChart';
 
-class DistributionBarChartComponent extends AbstractChart<
-  DistributionBarChartData,
-  DistributionBarChartProps
+class CigarettesPackChartComponent extends AbstractChart<
+  CigarettesPackChartData,
+  CigarettesPackChartProps
 > {
-  static displayName = 'Chart.DistributionBar';
+  static displayName = 'Chart.CigarettesPack';
   public static defaultProps: Partial<BaseChartProps<any>> = {
     direction: 'column',
     showXAxis: false,
@@ -40,43 +40,43 @@ class DistributionBarChartComponent extends AbstractChart<
     const { x, y, onClickHoverRect, onClickBar } = this.asProps;
 
     return (
-      <DistributionBar x={x} y={y}>
-        {this.renderDistributionTooltip()}
-        <DistributionBar.Hover onClick={onClickHoverRect} />
-        <DistributionBar.Annotation>
-          <DistributionBar.Label />
-          <DistributionBar.Percent />
-          <DistributionBar.Value />
-        </DistributionBar.Annotation>
-        <DistributionBar.Bar onClick={onClickBar}>
-          <DistributionBar.Bar.Background />
-          <DistributionBar.Bar.Fill />
-        </DistributionBar.Bar>
-      </DistributionBar>
+      <CigarettesPack x={x} y={y}>
+        {this.renderCigarettePackTooltip()}
+        <CigarettesPack.Hover onClick={onClickHoverRect} />
+        <CigarettesPack.Annotation>
+          <CigarettesPack.Label />
+          <CigarettesPack.Percent />
+          <CigarettesPack.Value />
+        </CigarettesPack.Annotation>
+        <CigarettesPack.Bar onClick={onClickBar}>
+          <CigarettesPack.Bar.Background />
+          <CigarettesPack.Bar.Fill />
+        </CigarettesPack.Bar>
+      </CigarettesPack>
     );
   }
 
-  protected renderDistributionTooltip(): React.ReactNode {
+  protected renderCigarettePackTooltip(): React.ReactNode {
     const { data, x, y, showTooltip } = this.asProps;
 
     if (!showTooltip) {
       return null;
     }
 
     return (
-      <DistributionBar.Tooltip wMin={100}>
+      <CigarettesPack.Tooltip wMin={100}>
         {({ index }: any) => {
           return {
             children: (
               <>
-                <DistributionBar.Tooltip.Title>{data[index][y]}</DistributionBar.Tooltip.Title>
+                <CigarettesPack.Tooltip.Title>{data[index][y]}</CigarettesPack.Tooltip.Title>
 
-                <DistributionBar.Tooltip.Dot>{data[index][x]}</DistributionBar.Tooltip.Dot>
+                <CigarettesPack.Tooltip.Dot>{data[index][x]}</CigarettesPack.Tooltip.Dot>
               </>
             ),
           };
         }}
-      </DistributionBar.Tooltip>
+      </CigarettesPack.Tooltip>
     );
   }
 
@@ -103,6 +103,6 @@ class DistributionBarChartComponent extends AbstractChart<
   }
 }
 
-export const DistributionBarChart: DistributionBarChartType = createComponent(
-  DistributionBarChartComponent,
+export const CigarettesPackChart: CigarettesPackChartType = createComponent(
+  CigarettesPackChartComponent,
 );
diff --git a/...ponent/Chart/DistributionBarChart.type.ts → ...mponent/Chart/CigarettesPackChart.type.ts b/...ponent/Chart/DistributionBarChart.type.ts → ...mponent/Chart/CigarettesPackChart.type.ts
@@ -6,9 +6,9 @@ import { BaseChartProps } from './AbstractChart.type';
 
 type BarKey = string;
 
-export type DistributionBarChartData = Array<Record<BarKey, number>>;
+export type CigarettesPackChartData = Array<Record<BarKey, number>>;
 
-export type DistributionBarChartProps = BaseChartProps<DistributionBarChartData> & {
+export type CigarettesPackChartProps = BaseChartProps<CigarettesPackChartData> & {
   x: string;
   y: string;
   xScale?: ScaleBand<any> | ScaleTime<any, any>;
@@ -21,7 +21,7 @@ export type DistributionBarChartProps = BaseChartProps<DistributionBarChartData>
   onClickBar?: (barItem: number, e: React.SyntheticEvent) => void;
 };
 
-export type DistributionBarChartType = Intergalactic.Component<
+export type CigarettesPackChartType = Intergalactic.Component<
   typeof Flex,
-  DistributionBarChartProps
+  CigarettesPackChartProps
 >;
diff --git a/semcore/d3-chart/src/component/Chart/index.ts b/semcore/d3-chart/src/component/Chart/index.ts
@@ -1,6 +1,6 @@
 import { LineChart } from './LineChart';
 import { BarChart } from './BarChart';
-import { DistributionBarChart } from './DistributionBarChart';
+import { CigarettesPackChart } from './CigarettesPackChart';
 import { HistogramChart } from './HistogramChart';
 import { ScatterPlotChart } from './ScatterPlotChart';
 import { AreaChart } from './AreaChart';
@@ -20,6 +20,6 @@ export default {
   Donut: DonutChart,
   Venn: VennChart,
   Radar: RadarChart,
-  Cigarette: CigaretteChart,
-  DistributionBar: DistributionBarChart,
+  Cigarettes: CigaretteChart,
+  CigarettesPack: CigarettesPackChart,
 };
diff --git a/semcore/d3-chart/src/index.js b/semcore/d3-chart/src/index.js
@@ -6,7 +6,7 @@ export { XAxis, YAxis } from './Axis';
 export { default as Line } from './Line';
 
 export { default as Bar } from './Bar';
-export { default as DistributionBar } from './DistributionBar';
+export { default as CigarettesPack } from './CigarettesPack';
 export { default as HorizontalBar } from './HorizontalBar';
 export { default as GroupBar } from './GroupBar';
 export { default as StackBar } from './StackBar';

diff --git a/semcore/d3-chart/src/style/bar.shadow.css b/semcore/d3-chart/src/style/bar.shadow.css
@@ -58,6 +58,6 @@ SBarValue {
   color: var(--intergalactic-text-primary, #191b23);
   text-align: right;
 }
-SDistributionBarHoverRect {
+SCigarettesPackHoverRect {
   fill: var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3));
 }