@uniai-fe/ui-legacy 0.1.1

package/src/chart/components/graphs/Line.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+  type LineProps,
+  type XAxisProps,
+  type YAxisProps,
+} from "recharts";
+import type { ChartLineProps } from "../../../types";
+import { useChartSize } from "@uniai-fe/react-hooks";
+
+/**
+ * 차트 템플릿; 라인 차트
+ * @param {ChartLineProps} props
+ */
+export default function ChartLine({
+  chartData,
+  legendData,
+  yAxisData,
+  chartLayoutOptions,
+  xAxisOptions,
+  yAxisOptions,
+  isHideGrid,
+  tooltipOptions,
+  containerOptions,
+  lineOptions,
+  children: extraChartComponents,
+}: ChartLineProps) {
+  const { sizeOptions } = useChartSize();
+
+  return (
+    <ResponsiveContainer
+      width="100%"
+      height="100%"
+      {...sizeOptions(containerOptions)}
+    >
+      <LineChart
+        // margin={{ top: 0, left: 0, right: 0, bottom: 0 }}
+        {...sizeOptions({
+          margin: { top: 0, left: 0, right: 0, bottom: 0 },
+          ...chartLayoutOptions,
+        })}
+        data={chartData}
+      >
+        {!isHideGrid && yAxisData?.[0] && (
+          <CartesianGrid vertical={false} yAxisId={yAxisData[0].axisCategory} />
+        )}
+        {tooltipOptions && <Tooltip {...tooltipOptions} />}
+        <XAxis
+          axisLine={false}
+          {...sizeOptions<XAxisProps>({
+            padding: { left: 30, right: 30 },
+            tickSize: 0,
+            tickMargin: 10,
+            ...xAxisOptions,
+          })}
+          // padding={{
+          //   left: rem(30),
+          //   right: rem(30),
+          //   ...objectSizeOptions(xAxisOptions?.padding),
+          // }}
+          // tickSize={singleSizeOptions(xAxisOptions?.tickSize || 0)}
+          // tickMargin={singleSizeOptions(xAxisOptions?.tickMargin || 10)}
+          // height={singleSizeOptions(xAxisOptions?.height)}
+        />
+        {yAxisData.map(({ key, axisCategory }) => (
+          <YAxis
+            key={key}
+            yAxisId={axisCategory}
+            axisLine={false}
+            hide={true}
+            {...sizeOptions<YAxisProps>({ tickSize: 0, ...yAxisOptions })}
+            // tickSize={singleSizeOptions(yAxisOptions?.tickSize || 0)}
+            // width={singleSizeOptions<YAxisWidth>(yAxisOptions?.width)}
+          />
+        ))}
+        {legendData
+          .filter(({ active }) => active)
+          .map(
+            ({
+              key,
+              code,
+              axisCategory,
+              name,
+              unit,
+              color,
+              highlight,
+              strokeStyle,
+            }) => (
+              <Line
+                key={key}
+                type="monotone"
+                dataKey={code}
+                yAxisId={axisCategory}
+                name={name}
+                unit={unit}
+                stroke={color}
+                strokeWidth="var(--chart-data-line-width)"
+                {...(strokeStyle
+                  ? {
+                      strokeDasharray: strokeStyle,
+                    }
+                  : {})}
+                {...(typeof highlight === "boolean" && highlight === false
+                  ? { strokeOpacity: 0.3 }
+                  : {})}
+                dot={false}
+                isAnimationActive={false}
+                {...sizeOptions<LineProps>(lineOptions)}
+              />
+            ),
+          )}
+        {extraChartComponents}
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}

package/src/chart/components/graphs/index.tsx

@@ -0,0 +1,17 @@
+import ChartArcGauge from "./ArcGauge";
+import ChartArcMeter from "./ArcMeter";
+import ChartArea from "./Area";
+import ChartBar from "./Bar";
+import ChartDoughnut from "./Doughnut";
+import ChartLine from "./Line";
+
+const ChartGraph = {
+  Bar: ChartBar,
+  Line: ChartLine,
+  Area: ChartArea,
+  Doughnut: ChartDoughnut,
+  ArcGauge: ChartArcGauge,
+  ArcMeter: ChartArcMeter,
+};
+
+export default ChartGraph;

package/src/chart/components/ticks/XAxis.tsx

@@ -0,0 +1,39 @@
+import type { ChartTickXAxisProps } from "../../../types";
+import { getXAxisTextAttr } from "@uniai-fe/util-react";
+
+/**
+ * 차트 템플릿 > tick; XAxis
+ * @param {ChartTickXAxisProps} props
+ * @param {RechartsXAxisTickProps} props.xAxisProps x축 옵션
+ */
+export default function ChartTickXAxis({
+  className,
+  children,
+  xAxisProps,
+  groupProps,
+  tSpanPos,
+  customValue,
+}: ChartTickXAxisProps) {
+  // recharts.js XAxis tick의 기본 props
+  const {
+    x,
+    // 추가 기본 정보; index, visibleTicksCount,
+    // index,
+    // payload - 각 x의 y 데이터; coordinate, value, index, offset, tickCoord, isShow
+    payload,
+  } = xAxisProps;
+
+  return (
+    <g className={className} {...groupProps}>
+      <text
+        {...getXAxisTextAttr(xAxisProps)}
+        className="recharts-text recharts-cartesian-axis-tick-value"
+      >
+        <tspan {...tSpanPos} x={x}>
+          {customValue || payload.value}
+        </tspan>
+      </text>
+      {children}
+    </g>
+  );
+}

package/src/chart/components/ticks/index.tsx

@@ -0,0 +1,7 @@
+import ChartTickXAxis from "./XAxis";
+
+const ChartTick = {
+  X: ChartTickXAxis,
+};
+
+export default ChartTick;

package/src/chart/index.tsx

@@ -0,0 +1,17 @@
+import ChartContents from "./components/Contents";
+import ChartControl from "./components/control";
+import ChartActivePieSector from "./components/custom/ActivePieSector";
+import ChartGraph from "./components/graphs";
+import ChartTick from "./components/ticks";
+
+const Chart = {
+  ContentsContainer: ChartContents,
+  Graph: ChartGraph,
+  Tick: ChartTick,
+  Control: ChartControl,
+  Custom: {
+    ActivePieSector: ChartActivePieSector,
+  },
+};
+
+export default Chart;

package/src/chart/styled.tsx

@@ -0,0 +1,3 @@
+const StyledChart = {};
+
+export default StyledChart;

package/src/chart/styles/scss/arc-gauge.scss

@@ -0,0 +1,11 @@
+:root {
+  --chart-arc-gauge-text-color: var(--color_90);
+  --chart-arc-gauge-text-weight: 600;
+
+  --chart-arc-gauge-value-size: 46px;
+  --chart-arc-gauge-unit-size: 30px;
+
+  --chart-arc-gauge-point-size: 22px;
+  --chart-arc-gauge-point-color: var(--color_90);
+  --chart-arc-gauge-point-border-width: 5px;
+}

package/src/chart/styles/scss/arc-meter.scss

@@ -0,0 +1,6 @@
+:root {
+  --chart-arc-meter-text-weight: 600;
+
+  --chart-arc-meter-text-value-size: 46px;
+  --chart-arc-meter-text-unit-size: 30px;
+}

package/src/chart/styles/scss/control.scss

@@ -0,0 +1,34 @@
+:root {
+  --chart-control-button-margin: 0.4rem;
+}
+// .charts-zoom-pan-control-container {
+//   display: flex;
+//   align-items: center;
+//   .chart-zoom-pan-button {
+//     margin-left: 6px;
+//     svg {
+//       rect {
+//         stroke: var(--color_40);
+//         transition: stroke 0.12s;
+//       }
+//       path {
+//         fill: var(--color_40);
+//         transition: fill 0.12s;
+//       }
+//     }
+//     &:not([disabled]):hover {
+//       svg {
+//         rect {
+//           stroke: var(--color_60);
+//         }
+//         path {
+//           fill: var(--color_60);
+//         }
+//       }
+//     }
+//     &[disabled] {
+//       opacity: 0.5;
+//       cursor: default;
+//     }
+//   }
+// }

package/src/chart/styles/scss/graph.scss

@@ -0,0 +1,3 @@
+:root {
+  --chart-data-line-width: 1.4px;
+}

package/src/chart/styles/scss/legend.scss

@@ -0,0 +1,35 @@
+:root {
+  --chart-legend-gap: 10px;
+
+  --chart-legend-text-size: 12px;
+  --chart-legend-text-color: var(--color_90);
+  --chart-legend-text-weight: 400;
+
+  --chart-legend-point-margin: 3px;
+  --chart-legend-point-size: 10px;
+}
+
+.recharts-legend-wrapper {
+  width: 100% !important;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  .recharts-default-legend {
+    display: flex;
+    align-items: center;
+    .recharts-legend-item {
+      margin-right: 0 !important;
+      margin-left: var(--chart-legend-gap);
+      display: flex !important;
+      align-items: center;
+      user-select: none;
+    }
+    .recharts-legend-item-text {
+      font-size: var(--chart-legend-text-size);
+      font-weight: 400;
+      color: var(--color_90) !important;
+      user-select: none;
+      cursor: pointer;
+    }
+  }
+}

package/src/chart/styles/scss/level.color.scss

@@ -0,0 +1,7 @@
+:root {
+  --chart-level-color-0: var(--color_20);
+  --chart-level-color-1: var(--red);
+  --chart-level-color-2: var(--orange);
+  --chart-level-color-3: var(--green);
+  --chart-level-color-4: var(--color-light-blue-600);
+}

package/src/chart/styles/scss/tick.scss

@@ -0,0 +1,48 @@
+:root {
+  --chart-tick-text-size: 1.1rem;
+  --chart-tick-text-weight: 500;
+  --chart-tick-text-color: var(--color_50);
+
+  --chart-tick-line-color: var(--color_20);
+
+  --chart-axis-label-color: var(--color_40);
+}
+
+.recharts-cartesian-axis-line {
+  stroke: var(--chart-tick-line-color);
+}
+.recharts-cartesian-axis-tick-line {
+  stroke: var(--chart-tick-line-color);
+}
+
+.recharts-cartesian-grid-horizontal,
+.recharts-cartesian-grid-vertical {
+  line {
+    stroke: var(--chart-tick-line-color);
+  }
+}
+
+.recharts-text {
+  tspan {
+    fill: var(--chart-tick-text-color);
+    font-size: var(--chart-tick-text-size);
+    font-weight: var(--chart-tick-text-weight);
+  }
+}
+
+.recharts-label {
+  --chart-tick-text-weight: 400;
+  tspan {
+    fill: var(--chart-axis-label-color);
+  }
+}
+
+.recharts-yAxis {
+  --chart-tick-text-weight: 400;
+}
+
+.recharts-layer {
+  text {
+    user-select: none;
+  }
+}

package/src/chart/styles/scss/tooltip.scss

@@ -0,0 +1,70 @@
+:root {
+  --chart-tooltip-cursor-line-color: #838588;
+
+  --chart-tooltip-point-size: 0.6rem;
+  --chart-tooltip-point-border-color: #fff;
+
+  --chart-tooltip-box-radius: 0.6rem;
+  --chart-tooltip-box-color: var(--color-blue-gray-700);
+  --chart-tooltip-box-point-margin: 0.5rem;
+  --chart-tooltip-box-legend-margin: 0.5rem;
+  --chart-tooltip-box-legend-text-size: 1.4rem;
+  --chart-tooltip-box-legend-text-color: var(--color_70);
+  --chart-tooltip-box-legend-text-weight: 500;
+  --chart-tooltip-box-legend-line-height: 1em;
+
+  --chart-tooltip-text-color: var(--color_70);
+
+  &.dark-mode {
+    --chart-tooltip-cursor-line-color: #dbdbdb;
+
+    --chart-tooltip-box-color: var(--color_theme_dark_30);
+  }
+}
+
+.recharts-tooltip-wrapper {
+  z-index: 100;
+  user-select: none;
+  pointer-events: none;
+  & > * {
+    user-select: none;
+    pointer-events: none;
+  }
+}
+
+.recharts-tooltip-cursor {
+  stroke: var(--chart-tooltip-cursor-line-color);
+}
+.recharts-dot {
+  stroke: var(--chart-tooltip-point-border-color);
+}
+.recharts-tooltip-label {
+  display: none;
+}
+.recharts-tooltip-dot {
+  width: var(--chart-tooltip-point-size);
+  height: var(--chart-tooltip-point-size);
+  margin-right: var(--chart-tooltip-box-point-margin);
+  border-radius: 50%;
+  background: var(--color_60);
+}
+.recharts-tooltip-item {
+  margin: var(--chart-tooltip-box-legend-margin) 0;
+  display: flex;
+  align-items: center;
+  span {
+    font-size: var(--chart-tooltip-box-legend-text-size);
+    color: var(--chart-tooltip-box-legend-text-color);
+    line-height: var(--chart-tooltip-box-legend-line-height);
+    font-weight: var(--chart-tooltip-box-legend-text-weight);
+  }
+}
+
+.charts-custom-tooltip-title {
+  font-weight: var(--chart-tooltip-box-legend-text-weight);
+}
+
+.recharts-default-tooltip {
+  padding: 0 10px !important;
+  border-radius: var(--chart-tooltip-box-radius);
+}

package/src/chart/styles/styled/arc-gauge.ts

@@ -0,0 +1,65 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const container = styled.div`
+  width: 100%;
+  height: fit-content;
+  position: relative;
+  z-index: 0;
+`;
+const track = styled.div`
+  width: fit-content;
+  height: fit-content;
+  font-size: 0;
+  margin: 0 auto;
+  position: relative;
+`;
+const point = styled.div<{ $level: number; $degree: number }>`
+  width: calc(
+    100% + var(--chart-arc-gauge-point-size) -
+      (var(--chart-arc-gauge-point-border-width) * 2)
+  );
+  height: var(--chart-arc-gauge-point-size);
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, calc(var(--chart-arc-gauge-point-size) / 2))
+    rotate(${({ $degree }) => $degree}deg);
+
+  &:before {
+    content: "게이지 포인트";
+    display: block;
+    font-size: 0;
+    width: var(--chart-arc-gauge-point-size);
+    height: var(--chart-arc-gauge-point-size);
+    border-radius: 50%;
+    border: var(--chart-arc-gauge-point-border-width) solid
+      var(--chart-level-color-${({ $level }) => $level});
+    background-color: #fff;
+  }
+`;
+const value = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  color: var(--chart-arc-gauge-text-color);
+  strong {
+    font-size: var(--chart-arc-gauge-value-size);
+    font-weight: var(--chart-arc-gauge-text-weight);
+  }
+  span {
+    font-size: var(--chart-arc-gauge-unit-size);
+    font-weight: var(--chart-arc-gauge-text-weight);
+  }
+`;
+
+const StyledArcGauge = {
+  container,
+  track,
+  point,
+  value,
+};
+
+export default StyledArcGauge;

package/src/chart/styles/styled/arc-meter.ts

@@ -0,0 +1,42 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const container = styled.div<{ $height?: number }>`
+  width: 100%;
+  height: ${({ $height }) => ($height ? `${$height}px` : "100%")};
+  position: relative;
+  display: flex;
+  justify-content: center;
+
+  svg {
+    overflow: visible;
+  }
+`;
+
+const text = styled.div<{ $color: string }>`
+  color: ${({ $color }) => $color};
+
+  display: flex;
+  align-items: baseline;
+
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+
+  strong {
+    font-size: var(--chart-arc-meter-text-value-size);
+    font-weight: var(--chart-arc-meter-text-weight);
+  }
+  span {
+    font-size: var(--chart-arc-meter-text-unit-size);
+    font-weight: var(--chart-arc-meter-text-weight);
+  }
+`;
+const StyledArcMeter = {
+  container,
+  text,
+};
+
+export default StyledArcMeter;

package/src/chart/styles/styled/common.ts

@@ -0,0 +1,14 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const container = styled.figure`
+  width: 100%;
+  height: 100%;
+`;
+
+const StyledChartCommon = {
+  container,
+};
+
+export default StyledChartCommon;

package/src/chart/styles/styled/control.ts

@@ -0,0 +1,31 @@
+"use client";
+
+import styled from "styled-components";
+
+const button = styled.button`
+  width: fit-content;
+  height: fit-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &[disabled] {
+    opacity: 0.4;
+  }
+`;
+
+const container = styled.div`
+  width: fit-content;
+  height: fit-content;
+  display: flex;
+  align-items: center;
+  ${button} {
+    margin: 0 var(--chart-control-button-margin);
+  }
+`;
+
+const StyledChartControl = {
+  container,
+  button,
+};
+
+export default StyledChartControl;

package/src/chart/styles/styled/legend.ts

@@ -0,0 +1,11 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const container = styled.div``;
+
+const StyledChartLegend = {
+  container,
+};
+
+export default StyledChartLegend;

package/src/chart/svg/gauge-track.min.svg

@@ -0,0 +1 @@
+<svg width="190" height="95" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path fill-rule="evenodd" clip-rule="evenodd" d="M30.054 32.816a4.98 4.98 0 01.491 7.026 85.32 85.32 0 00-20.604 48.54 4.98 4.98 0 01-9.922-.869 95.282 95.282 0 0123.009-54.206 4.98 4.98 0 017.026-.49z" fill="#E22A21"/><path fill-rule="evenodd" clip-rule="evenodd" d="M30.054 32.816a4.98 4.98 0 01.491 7.026 85.32 85.32 0 00-20.604 48.54 4.98 4.98 0 01-9.922-.869 95.282 95.282 0 0123.009-54.206 4.98 4.98 0 017.026-.49z" fill="#fff" fill-opacity=".2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M93.607 5.39a4.98 4.98 0 01-4.62 5.314 85.321 85.321 0 00-48.893 19.754 4.98 4.98 0 01-6.402-7.63 95.281 95.281 0 0154.6-22.06 4.98 4.98 0 015.315 4.621z" fill="#F86800"/><path fill-rule="evenodd" clip-rule="evenodd" d="M93.607 5.39a4.98 4.98 0 01-4.62 5.314 85.321 85.321 0 00-48.893 19.754 4.98 4.98 0 01-6.402-7.63 95.281 95.281 0 0154.6-22.06 4.98 4.98 0 015.315 4.621z" fill="#fff" fill-opacity=".2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M97.847 5.426A4.98 4.98 0 01103.242.9a95.288 95.288 0 0154.207 23.01 4.981 4.981 0 01-6.535 7.517 85.323 85.323 0 00-48.54-20.604 4.98 4.98 0 01-4.527-5.396z" fill="#00AA02"/><path fill-rule="evenodd" clip-rule="evenodd" d="M97.847 5.426A4.98 4.98 0 01103.242.9a95.288 95.288 0 0154.207 23.01 4.981 4.981 0 01-6.535 7.517 85.323 85.323 0 00-48.54-20.604 4.98 4.98 0 01-4.527-5.396z" fill="#fff" fill-opacity=".2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M160.911 33.959a4.981 4.981 0 017.017.613 95.283 95.283 0 0122.059 54.6 4.98 4.98 0 11-9.936.695 85.32 85.32 0 00-19.753-48.892 4.98 4.98 0 01.613-7.017z" fill="#007CDB"/><path fill-rule="evenodd" clip-rule="evenodd" d="M160.911 33.959a4.981 4.981 0 017.017.613 95.283 95.283 0 0122.059 54.6 4.98 4.98 0 11-9.936.695 85.32 85.32 0 00-19.753-48.892 4.98 4.98 0 01.613-7.016z" fill="#fff" fill-opacity=".2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M94.077 18.275c-.329 0-.658.002-.987.006l-.013-.996a75.718 75.718 0 012 0l-.013.996a75.477 75.477 0 00-.987-.006zm4.93.16a75.404 75.404 0 00-1.97-.102l.038-.996a76.48 76.48 0 011.996.105l-.065.994zm-7.889-.102c-.657.026-1.314.06-1.97.103l-.065-.994c.664-.044 1.33-.078 1.996-.105l.04.996zm11.817.464a75.799 75.799 0 00-1.962-.206l.091-.992c.664.06 1.327.13 1.988.209l-.117.989zm-15.753-.206c-.656.06-1.31.128-1.962.206l-.117-.99a76.405 76.405 0 011.988-.208l.09.992zm19.657.772a74.953 74.953 0 00-1.949-.309l.143-.985c.66.095 1.318.2 1.974.312l-.168.982zm-23.575-.309c-.651.095-1.3.198-1.948.309l-.169-.982a76.301 76.301 0 011.974-.313l.143.986zm-3.888.668c-.645.129-1.288.265-1.93.41l-.22-.971a76.43 76.43 0 011.956-.416l.194.977zm31.332.41a74.694 74.694 0 00-1.93-.41l.195-.977c.654.13 1.305.269 1.955.416l-.22.971zm-35.18.461c-.637.162-1.273.332-1.905.51l-.27-.958c.64-.18 1.284-.353 1.93-.517l.245.965zm39.004.51a75.32 75.32 0 00-1.906-.51l.245-.965c.646.164 1.29.336 1.931.517l-.27.959zm-42.8.561c-.629.195-1.254.398-1.877.61l-.32-.944a76.58 76.58 0 011.9-.617l.296.951zm46.567.61a74.73 74.73 0 00-1.876-.61l.296-.951c.636.197 1.27.403 1.9.618l-.32.943zm-50.303.658c-.617.228-1.231.464-1.842.707l-.37-.925c.62-.247 1.242-.486 1.867-.716l.345.934zM122 23.64c-.61-.243-1.224-.48-1.841-.707l.345-.934c.625.23 1.247.47 1.866.716l-.37.925zm-57.669.755c-.604.26-1.205.527-1.802.803l-.417-.905a76.26 76.26 0 011.826-.813l.393.915zm61.294.803a75.054 75.054 0 00-1.802-.803l.393-.915a76.26 76.26 0 011.826.813l-.417.904zm-64.876.849c-.59.29-1.176.59-1.758.895l-.464-.881a76.57 76.57 0 011.781-.908l.44.894zm68.414.895a76.313 76.313 0 00-1.757-.895l.44-.893c.598.294 1.191.597 1.781.907l-.464.881zm-71.906.942c-.573.32-1.143.65-1.708.986l-.51-.856c.573-.34 1.15-.674 1.731-1l.487.87zm75.349.986a75.622 75.622 0 00-1.709-.986l.487-.87c.581.326 1.158.66 1.731 1l-.509.856zm-78.74 1.03c-.555.351-1.107.71-1.654 1.075l-.553-.828a76.05 76.05 0 011.676-1.089l.532.843zm82.076 1.075a76.943 76.943 0 00-1.654-1.074l.531-.843c.563.356 1.122.719 1.676 1.089l-.553.828zm-85.356 1.117c-.536.38-1.068.766-1.596 1.16l-.596-.798a76.46 76.46 0 011.617-1.175l.575.813zm88.578 1.16c-.528-.394-1.06-.78-1.596-1.16l.575-.813c.543.384 1.082.776 1.617 1.175l-.596.798zm-91.738 1.2c-.516.407-1.028.821-1.534 1.242l-.636-.765c.512-.427 1.03-.846 1.553-1.258l.617.782zm94.836 1.242a74.858 74.858 0 00-1.533-1.241l.616-.782a76.21 76.21 0 011.554 1.258l-.637.765zm-97.87 1.281c-.493.434-.982.874-1.465 1.32l-.677-.73c.49-.454.985-.9 1.486-1.338l.657.748zm100.836 1.32a79.7 79.7 0 00-1.466-1.32l.656-.748c.501.438.996.884 1.486 1.337l-.676.731zM41.496 39.652a75.229 75.229 0 00-1.396 1.396l-.714-.695a78.52 78.52 0 011.415-1.414l.695.713zm105.865.694a71.778 71.778 0 00-.703-.694l.696-.713a88.73 88.73 0 011.414 1.414l-.714.695c-.229-.235-.46-.47-.693-.702zM38.742 42.479c-.447.483-.887.972-1.32 1.466l-.749-.657c.439-.5.885-.995 1.338-1.485l.731.676zm111.99 1.466a74.708 74.708 0 00-1.32-1.466l.732-.676c.452.49.898.985 1.337 1.485l-.749.657zm2.523 3.033a75.839 75.839 0 00-1.242-1.533l.766-.637c.427.513.846 1.03 1.258 1.553l-.782.617zM36.141 45.445c-.421.506-.835 1.017-1.242 1.533l-.782-.617c.412-.522.832-1.04 1.258-1.553l.766.637zm119.474 4.694a73.673 73.673 0 00-1.159-1.596l.798-.596c.399.534.79 1.073 1.175 1.617l-.814.575zM33.698 48.543c-.393.527-.78 1.06-1.16 1.596l-.812-.575c.384-.544.775-1.083 1.174-1.617l.798.596zm124.109 4.876a78.443 78.443 0 00-1.074-1.654l.828-.554c.37.555.733 1.113 1.088 1.677l-.842.531zM31.422 51.765a75.036 75.036 0 00-1.075 1.654l-.842-.531a76.05 76.05 0 011.088-1.677l.829.554zm128.402 5.045a75.89 75.89 0 00-.986-1.709l.856-.51c.341.574.674 1.15.999 1.732l-.869.487zM29.316 55.1a75.15 75.15 0 00-.986 1.709l-.869-.487c.326-.581.659-1.158 1-1.731l.856.51zm132.345 5.2a73.285 73.285 0 00-.896-1.758l.882-.463c.31.59.613 1.183.907 1.78l-.893.441zM27.389 58.543a75.354 75.354 0 00-.896 1.758l-.893-.44c.295-.598.597-1.192.907-1.781l.882.463zm135.924 5.34a74.478 74.478 0 00-.803-1.801l.905-.417c.279.605.55 1.214.813 1.826l-.915.393zM25.644 62.083a75.642 75.642 0 00-.802 1.802l-.915-.393c.263-.612.534-1.221.813-1.826l.904.417zm139.131 5.466a79.953 79.953 0 00-.707-1.842l.925-.369c.247.619.485 1.241.716 1.866l-.934.345zM24.087 65.706c-.244.611-.48 1.225-.707 1.842l-.935-.345c.231-.625.47-1.247.717-1.866l.925.37zm141.956 5.578a72.49 72.49 0 00-.61-1.877l.943-.32c.215.631.42 1.265.618 1.901l-.951.296zM22.721 69.408a75.565 75.565 0 00-.61 1.876l-.95-.296c.197-.636.403-1.27.617-1.9l.943.32zm144.393 5.673a73.238 73.238 0 00-.511-1.906l.959-.27c.181.64.353 1.284.517 1.93l-.965.246zM21.551 73.175a74.87 74.87 0 00-.51 1.906l-.966-.245c.164-.647.337-1.29.518-1.931l.958.27zm146.434 5.754a78.31 78.31 0 00-.41-1.93l.971-.22c.147.65.286 1.301.416 1.955l-.977.195zM20.58 76.999a75.295 75.295 0 00-.41 1.93l-.977-.195c.13-.654.269-1.305.416-1.955l.971.22zm148.073 5.818c-.095-.652-.197-1.301-.309-1.949l.982-.168c.113.656.217 1.314.313 1.974l-.986.143zM19.81 80.868a75.11 75.11 0 00-.308 1.949l-.986-.143c.096-.66.2-1.318.313-1.975l.981.17zm149.307 5.866a75.29 75.29 0 00-.207-1.962l.989-.117c.079.661.148 1.324.209 1.988l-.991.091zM19.244 84.772a75.323 75.323 0 00-.206 1.962l-.992-.09c.061-.665.131-1.328.21-1.989l.988.117zm150.13 5.899a71.647 71.647 0 00-.103-1.97l.994-.065c.044.664.079 1.33.105 1.996l-.996.039zM18.884 88.7a75.389 75.389 0 00-.104 1.97l-.995-.04c.026-.666.061-1.331.105-1.995l.994.065zm150.548 4.929c0-.33-.002-.658-.006-.987l.996-.013c.004.333.007.666.007 1h-.997zm-150.703-.987a75.45 75.45 0 00-.007.987h-.996c0-.334.002-.667.007-1l.996.013z" fill="var(--color_90)" fill-opacity=".2"/></svg>

package/src/chart/utils/getLevel.ts

@@ -0,0 +1,23 @@
+/**
+ * 스코어 레벨 추출 (4단계)
+ * @param {number | ""} value
+ * @param {number} [max] 최대값 (기본값 100)
+ */
+export default function getChartLevel(
+  value: number | "",
+  max: number = 100,
+): number {
+  if (value === "") return 0;
+
+  const stepAmount = max / 4;
+  const danger = stepAmount;
+  const warning = stepAmount * 2;
+  const caution = stepAmount * 3;
+
+  if (value < danger) return 1;
+  else if (danger <= value && value < caution) return 2;
+  else if (caution <= value && value < warning) return 3;
+  else if (value >= warning) return 4;
+
+  return 0;
+}

package/src/chip/chip.scss

@@ -0,0 +1 @@
+@use "./styles/scss/variables.scss";