feat: init ResponsiveChart

prenda-school · Jun 18, 2024 · 46937cd · 46937cd
1 parent 3960854
commit 46937cd
Show file tree

Hide file tree

Showing 14 changed files with 592 additions and 181 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "7.8.0",
     "@typescript-eslint/parser": "7.8.0",
+    "@visx/responsive": "^3.10.2",
     "@vitejs/plugin-react": "4.2.1",
     "@vitest/ui": "1.3.1",
     "babel-jest": "^29.4.1",

diff --git a/packages/components/examples/report-card/empowerment-metric/DualLinearGauge.stories.tsx b/packages/components/examples/report-card/empowerment-metric/DualLinearGauge.stories.tsx
@@ -7,7 +7,7 @@ import {
   BarScale,
   BarUnitLabel,
   BarUnits,
-  Chart,
+  useResponsiveChart,
 } from '../../../src';
 
 const Purple500 = '#6554C0';
@@ -70,62 +70,81 @@ const ReportCardEmpowermentMetricDualLinearGauge = (props: {
       ? 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 (
-    <Chart
-      width={544 + 8 + 8}
-      height={70 + 8 + 8 + 16}
-      marginBottom={8}
-      marginLeft={8}
-      marginRight={8}
-      marginTop={8 + 16}
-    >
-      <BarScale lengthMax={544} valueMin={valueMin} valueMax={valueMax}>
-        <Bar
-          thickness={thicknessPrimary}
-          cornerRadius={cornerRadius}
-          borderWidth={borderWidth}
-        >
-          <BarFill
-            overrides={{
-              barScale: {
-                lengthMin: thicknessPrimary / 2,
-              },
-            }}
-            to={valuePrimary}
-            style={{ fill: Purple500 }}
-          />
+    <div ref={chart.container.ref} {...chart.container.props}>
+      <svg {...chart.svg.props}>
+        {/* inner */}
+        <g {...chart.inner.props}>
+          <BarScale
+            lengthMax={chart.inner.dim.width}
+            valueMin={valueMin}
+            valueMax={valueMax}
+          >
+            <Bar
+              thickness={thicknessPrimary}
+              cornerRadius={cornerRadius}
+              borderWidth={borderWidth}
+            >
+              <BarFill
+                overrides={{
+                  barScale: {
+                    lengthMin: thicknessPrimary / 2,
+                  },
+                }}
+                to={valuePrimary}
+                style={{ fill: Purple500 }}
+              />
 
-          <BarUnits offset={thicknessSecondary + unitsOffset}>
-            <BarUnitLabel at={1} style={unitLabelStyle(1, valuePrimary)}>
-              Not really
-            </BarUnitLabel>
-            <BarUnitLabel at={2} style={unitLabelStyle(2, valuePrimary)}>
-              Kind of
-            </BarUnitLabel>
-            <BarUnitLabel at={3} style={unitLabelStyle(3, valuePrimary)}>
-              Very
-            </BarUnitLabel>
-          </BarUnits>
-        </Bar>
+              <BarUnits offset={thicknessSecondary + unitsOffset}>
+                <BarUnitLabel at={1} style={unitLabelStyle(1, valuePrimary)}>
+                  Not really
+                </BarUnitLabel>
+                <BarUnitLabel at={2} style={unitLabelStyle(2, valuePrimary)}>
+                  Kind of
+                </BarUnitLabel>
+                <BarUnitLabel at={3} style={unitLabelStyle(3, valuePrimary)}>
+                  Very
+                </BarUnitLabel>
+              </BarUnits>
+            </Bar>
 
-        <Bar
-          thickness={thicknessSecondary}
-          cornerRadius={cornerRadius}
-          dy={thicknessPrimary}
-          borderWidth={borderWidth}
-        >
-          <BarFill
-            overrides={{
-              barScale: {
-                lengthMin: thicknessSecondary / 2,
-              },
-            }}
-            to={valueSecondary}
-            style={{ fill: Purple200 }}
-          />
-        </Bar>
-      </BarScale>
-    </Chart>
+            <Bar
+              thickness={thicknessSecondary}
+              cornerRadius={cornerRadius}
+              dy={thicknessPrimary}
+              borderWidth={borderWidth}
+            >
+              <BarFill
+                overrides={{
+                  barScale: {
+                    lengthMin: thicknessSecondary / 2,
+                  },
+                }}
+                to={valueSecondary}
+                style={{ fill: Purple200 }}
+              />
+            </Bar>
+          </BarScale>
+        </g>
+      </svg>
+    </div>
   );
 };
 

diff --git a/packages/components/examples/report-card/empowerment-metric/DualRadialGauge.stories.tsx b/packages/components/examples/report-card/empowerment-metric/DualRadialGauge.stories.tsx
@@ -6,8 +6,8 @@ import {
   ArcSweep,
   ArcUnitLabel,
   ArcScale,
-  Chart,
   ArcUnits,
+  useResponsiveChart,
 } from '../../../src';
 
 const Neutral70 = '#EBECF0';
@@ -60,52 +60,94 @@ const ReportCardEmpowermentMetricDualRadialGauge = (props: {
     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 (
-    <Chart
-      width={544 - 68 * 2 + 80 + 80}
-      height={radiusPrimary + 16 + 28}
-      marginBottom={16}
-      marginLeft={80}
-      marginRight={80}
-      marginTop={28}
-    >
-      <g transform={`translate(${radiusPrimary}, ${radiusPrimary})`}>
-        <ArcScale
-          angleMin={(-1 * Math.PI) / 2}
-          angleMax={Math.PI / 2}
-          valueMin={valueMin}
-          valueMax={valueMax}
-        >
-          <Arc
-            radius={radiusPrimary}
-            ratio={radiusRatioPrimary}
-            cornerRadius={cornerRadius}
-          >
-            <ArcSweep style={{ fill: Neutral70 }} />
-            <ArcCircle at={valuePrimary} style={{ fill: Purple600 }} />
-            <ArcUnits offset={unitsOffset}>
-              <ArcUnitLabel at={1} style={unitLabelStyle(1, valuePrimary)}>
-                Too easy
-              </ArcUnitLabel>
-              <ArcUnitLabel at={2} style={unitLabelStyle(2, valuePrimary)}>
-                Just right
-              </ArcUnitLabel>
-              <ArcUnitLabel at={3} style={unitLabelStyle(3, valuePrimary)}>
-                Too hard
-              </ArcUnitLabel>
-            </ArcUnits>
-          </Arc>
-          <Arc
-            radius={radiusSecondary}
-            ratio={radiusRatioSecondary}
-            cornerRadius={cornerRadius}
+    <div ref={chart.container.ref} {...chart.container.props}>
+      <svg {...chart.svg.props}>
+        {/* inner */}
+        <g {...chart.inner.props}>
+          {/* inner-center */}
+          <g
+            transform={`translate(${
+              Math.max(
+                0,
+                chart.svg.dim.width -
+                  chart.inner.dim.margin.right -
+                  chart.inner.dim.margin.left -
+                  chart.inner.dim.width
+              ) / 2
+            },0)`}
           >
-            <ArcSweep style={{ fill: Neutral70 }} />
-            <ArcCircle at={valueSecondary} style={{ fill: Purple200 }} />
-          </Arc>
-        </ArcScale>
-      </g>
-    </Chart>
+            {/* center-arc */}
+            <g transform={`translate(${radiusPrimary}, ${radiusPrimary})`}>
+              <ArcScale
+                angleMin={(-1 * Math.PI) / 2}
+                angleMax={Math.PI / 2}
+                valueMin={valueMin}
+                valueMax={valueMax}
+              >
+                <Arc
+                  radius={radiusPrimary}
+                  ratio={radiusRatioPrimary}
+                  cornerRadius={cornerRadius}
+                >
+                  <ArcSweep style={{ fill: Neutral70 }} />
+                  <ArcCircle at={valuePrimary} style={{ fill: Purple600 }} />
+                  <ArcUnits offset={unitsOffset}>
+                    <ArcUnitLabel
+                      at={1}
+                      style={unitLabelStyle(1, valuePrimary)}
+                    >
+                      Too easy
+                    </ArcUnitLabel>
+                    <ArcUnitLabel
+                      at={2}
+                      style={unitLabelStyle(2, valuePrimary)}
+                    >
+                      Just right
+                    </ArcUnitLabel>
+                    <ArcUnitLabel
+                      at={3}
+                      style={unitLabelStyle(3, valuePrimary)}
+                    >
+                      Too hard
+                    </ArcUnitLabel>
+                  </ArcUnits>
+                </Arc>
+                <Arc
+                  radius={radiusSecondary}
+                  ratio={radiusRatioSecondary}
+                  cornerRadius={cornerRadius}
+                >
+                  <ArcSweep style={{ fill: Neutral70 }} />
+                  <ArcCircle at={valueSecondary} style={{ fill: Purple200 }} />
+                </Arc>
+              </ArcScale>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </div>
   );
 };