feat(Chart.Bars): Make it possible to create bar charts

Author: PrettyCoffee

src/components/ui/chart/bars.tsx

@@ -0,0 +1,102 @@
+import { Fragment } from "react/jsx-runtime"
+
+import { cn } from "utils/cn"
+
+import {
+  chartColor,
+  ChartFillColor,
+  ChartStrokeColor,
+} from "./fragments/chart-color"
+import { Coordinate, useChartContext } from "./fragments/chart-context"
+import { Text } from "./fragments/text"
+import { createTransition } from "./utils/get-transition"
+
+const { runTransition: runTextTransition } = createTransition({
+  initStyles: {
+    translate: "0 -16px",
+    opacity: "0",
+  },
+  targetStyles: {
+    opacity: "1",
+    translate: "0 0",
+  },
+})
+
+const { runTransition: runBarTransition } = createTransition({
+  timingFunction: "bounce",
+  initStyles: {
+    transformOrigin: "0 100%",
+    scale: "1 0",
+    opacity: "0",
+  },
+  targetStyles: {
+    transformOrigin: "0 100%",
+    scale: "1 1",
+    opacity: "1",
+  },
+})
+
+interface BarsProps {
+  points: Coordinate[]
+  ground?: number
+  barWidth?: number
+  strokeColor?: ChartStrokeColor["color"]
+  fillColor?: ChartFillColor["color"]
+  printValue?: (value: Coordinate) => string
+}
+
+export const Bars = ({
+  points,
+  ground = 8,
+  barWidth = 16,
+  strokeColor = "none",
+  fillColor = "default",
+  printValue,
+}: BarsProps) => {
+  const { scalePoint, scaleY } = useChartContext()
+  const bars = points.map(point => {
+    const top = scalePoint(point)
+    const bottom = { x: top.x, y: scaleY(ground) }
+    return { top, bottom, value: point }
+  })
+
+  return (
+    <>
+      {bars.map(({ bottom, top, value }, index) => {
+        const text = printValue?.(value)
+        return (
+          <Fragment key={`${top.x}-${top.y}`}>
+            <rect
+              ref={node => {
+                runBarTransition({ node, items: bars.length, index })
+              }}
+              rx={2}
+              ry={2}
+              x={top.x - barWidth / 2}
+              y={top.y}
+              width={barWidth}
+              height={bottom.y - top.y}
+              strokeWidth={strokeColor === "none" ? 0 : 1}
+              className={cn(
+                chartColor.stroke({ color: strokeColor }),
+                chartColor.fill({ color: fillColor })
+              )}
+            />
+            {text && (
+              <Text
+                ref={node => {
+                  runTextTransition({ node, items: bars.length, index })
+                }}
+                x={top.x}
+                y={top.y - 8}
+                anchor="middle"
+              >
+                {text}
+              </Text>
+            )}
+          </Fragment>
+        )
+      })}
+    </>
+  )
+}

src/components/ui/chart/index.ts

@@ -1,4 +1,5 @@
 import { XAxis, YAxis } from "./axis"
+import { Bars } from "./bars"
 import { Caption } from "./caption"
 import { ChartRoot } from "./chart-root"
 import { Dots } from "./dots"
@@ -8,13 +9,14 @@ import { getExtremes } from "./utils/get-extremes"
 
 export type { Coordinate } from "./fragments/chart-context"
 
-ChartRoot._childrenPriority = [Grid, XAxis, YAxis, Line, Dots]
+ChartRoot._childrenPriority = [Grid, XAxis, YAxis, Bars, Line, Dots]
 
 export const Chart = {
   Root: ChartRoot,
   Grid,
   XAxis,
   YAxis,
+  Bars,
   Line,
   Dots,
   Caption,