@uniai-fe/chart-legacy 0.1.1

package/src/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/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/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/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/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/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/styles/styled/icon.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import { styled } from "styled-components";
+import { StyledIcon } from "@uniai-fe/ui-legacy";
+
+// 인터랙션에 따른 스타일 변화는, 상위 요소인 button에서 처리
+const container = styled(StyledIcon.common.figure)`
+  svg path {
+    fill: var(--icon-chart-control-color-default);
+  }
+`;
+
+const StyledIconChart = {
+  container,
+};
+
+export default StyledIconChart;

package/src/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/svg/control/pan-left.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="18" height="18" rx="3" stroke="#A8B3BD" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.41071 5.24418C9.73612 4.91877 10.2637 4.91877 10.5891 5.24418C10.9146 5.5696 10.9146 6.0972 10.5891 6.42262L7.84494 9.16682H14.1667C14.6269 9.16682 15 9.53989 15 10.0001C15 10.4603 14.6269 10.8334 14.1667 10.8334H7.84514L10.5891 13.5774C10.9146 13.9028 10.9146 14.4304 10.5891 14.7558C10.2637 15.0812 9.73612 15.0812 9.41071 14.7558L5.25367 10.5988C5.09724 10.4473 5 10.235 5 10.0001C5 9.88349 5.02395 9.77249 5.0672 9.67172C5.10778 9.57694 5.16675 9.48814 5.24411 9.41078L9.41071 5.24418Z" fill="#A8B3BD"/>
+</svg>

package/src/svg/control/pan-right.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="18" height="18" rx="3" stroke="#A8B3BD" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5893 14.7558C10.2639 15.0812 9.73625 15.0812 9.41081 14.7558C9.08537 14.4304 9.08537 13.9027 9.41081 13.5773L12.1548 10.8332H5.83335C5.3731 10.8332 5 10.4601 5 9.9999C5 9.53966 5.3731 9.16656 5.83335 9.16656H12.1546L9.41081 6.42274C9.08537 6.0973 9.08537 5.56966 9.41081 5.24421C9.73625 4.91877 10.2639 4.91877 10.5893 5.24421L14.7463 9.4012C14.9028 9.55269 15 9.76494 15 9.9999C15 10.116 14.9762 10.2266 14.9333 10.3271C14.8927 10.4223 14.8336 10.5116 14.7559 10.5893L10.5893 14.7558Z" fill="#A8B3BD"/>
+</svg>

package/src/svg/control/zoom-in.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="18" height="18" rx="3" stroke="#A8B3BD" stroke-width="2"/>
+<path d="M10 5C10.5523 5 11 5.44772 11 6L11 9H14C14.5523 9 15 9.44771 15 10C15 10.5523 14.5523 11 14 11H11L11 14C11 14.5523 10.5523 15 10 15C9.44771 15 9 14.5523 9 14L9 11H6C5.44771 11 5 10.5523 5 10C5 9.44771 5.44771 9 6 9H9L9 6C9 5.44772 9.44771 5 10 5Z" fill="#A8B3BD"/>
+</svg>

package/src/svg/control/zoom-out.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="18" height="18" rx="3" stroke="#A8B3BD" stroke-width="2"/>
+<path d="M14 11C14.5523 11 15 10.5523 15 10C15 9.44771 14.5523 9 14 9H6C5.44771 9 5 9.44771 5 10C5 10.5523 5.44771 11 6 11H14Z" fill="#A8B3BD"/>
+</svg>

package/src/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/types/axis.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 차트 y축 카테고리별 생성 데이터
+ * @property {string} key - 렌더링 키
+ * @property {string} axisCategory - y축 id
+ */
+export interface ChartYAxisDataType {
+  /**
+   * 렌더링 키
+   */
+  key: string;
+  /**
+   * y축 id
+   */
+  axisCategory: string;
+}

package/src/types/control.d.ts

@@ -0,0 +1,109 @@
+/**
+ * 차트 제어 타입
+ * @desc
+ * - zoom-in: 확대
+ * - zoom-out: 축소
+ * - pan-left: 왼쪽으로 이동
+ * - pan-right: 오른쪽으로 이동
+ */
+export type ChartControlRole =
+  | "zoom-in"
+  | "zoom-out"
+  | "pan-left"
+  | "pan-right";
+
+/**
+ * 차트 제어 범위
+ */
+export type ChartControlRange = {
+  [edge: string]: number;
+  start: number;
+  end: number;
+};
+/**
+ * 차트 제어 데이터 컨텍스트
+ * @desc
+ * - originData: 차트 데이터 원본
+ * - indexRange: 현재 X축 범위 [시작 인덱스, 끝 인덱스]
+ * - setIndexRange: X축 범위 업데이트 함수
+ */
+export type ChartControlContext<ChartData extends object = object> = {
+  /**
+   * 차트 데이터 원본
+   */
+  originData: ChartData[];
+  /**
+   * 현재 X축 범위
+   * @desc
+   * - [시작 인덱스, 끝 인덱스]
+   */
+  indexRange: ChartControlRange;
+  /**
+   * X축 범위 업데이트
+   * @desc
+   * - [시작 인덱스, 끝 인덱스]
+   */
+  setIndexRange: React.Dispatch<React.SetStateAction<ChartControlRange>>;
+};
+
+/**
+ * 차트 제어 도구; 확대/축소 (zoom)
+ */
+export type ChartControlMethodZoom = {
+  [direction: string]: () => void;
+  in: () => void;
+  out: () => void;
+};
+/**
+ * 차트 제어 도구; 좌우 이동 (pan)
+ */
+export type ChartControlMethodPan = {
+  [direction: string]: () => void;
+  left: () => void;
+  right: () => void;
+};
+/**
+ * 차트 제어 도구; 동작 함수
+ */
+export type ChartControlMethod = {
+  zoom: ChartControlMethodZoom;
+  pan: ChartControlMethodPan;
+};
+
+/**
+ * 차트 제어 도구; 확대/축소 비활성화 상태
+ */
+export type ChartControlDisabledZoom = {
+  [direction: string]: boolean;
+  in: boolean;
+  out: boolean;
+};
+/**
+ * 차트 제어 도구; 좌우 이동 상태
+ */
+export type ChartControlDisabledPan = {
+  [direction: string]: boolean;
+  left: boolean;
+  right: boolean;
+};
+/**
+ * 차트 제어 도구; 상태
+ */
+export type ChartControlDisabled = {
+  zoom: ChartControlDisabledZoom;
+  pan: ChartControlDisabledPan;
+};
+
+/**
+ * 차트 제어 도구
+ */
+export type ChartControlReturn = {
+  /**
+   * 동작 함수
+   */
+  method: ChartControlMethod;
+  /**
+   * 비활성화 상태
+   */
+  disabled: ChartControlDisabled;
+};

package/src/types/data.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 차트 데이터; 1차원 데이터
+ */
+export type ChartCoreDataSingleType = {
+  /**
+   * 임의의 차트 데이터
+   */
+  [dataKey: string]: number | string | null;
+  /**
+   * 데이터 명칭
+   */
+  name: string;
+  /**
+   * 데이터 값
+   */
+  value: number | null;
+  /**
+   * 데이터 단위
+   */
+  unit: string;
+  /**
+   * 데이터 색상
+   */
+  fill: string;
+  /**
+   * pie 차트의 경우, 데이터 트랙
+   * - 데이터 총량 또는 게이지 최대값
+   */
+  track?: number;
+};
+
+/**
+ * 차트 데이터; 2차원 데이터
+ */
+export type ChartCoreDataAxisType = {
+  /**
+   * 차트 시그니처 데이터
+   * number | string | null
+   */
+  [dataKey: string]: number | string | null;
+};

package/src/types/dot.d.ts

@@ -0,0 +1,3 @@
+import type { Props } from "recharts/types/shape/Dot";
+
+export type ChartDotProps = Props;

package/src/types/index.d.ts

@@ -0,0 +1,7 @@
+export type * from "./legend";
+export type * from "./axis";
+export type * from "./data";
+export type * from "./props";
+export type * from "./tick";
+export type * from "./dot";
+export type * from "./control";

package/src/types/legend.d.ts

@@ -0,0 +1,124 @@
+/**
+ * <Area /> 차트 그라디언트 컬러 데이터
+ */
+export type AreaGradientOptions = {
+  /**
+   * 렌더링 키
+   */
+  key: string;
+  /**
+   * 컬러 위치값
+   */
+  offset: string;
+  /**
+   * 컬러
+   * - rgba
+   * - hex + alpha
+   */
+  color: string;
+};
+/**
+ * <Area /> 차트 그라디언트 옵션
+ */
+export type AreaGradientProps = {
+  /**
+   * <linearGradient id="selectorId" />
+   * <Area fill="url(#selectorId)" />
+   */
+  selectorId: string;
+  gradient: AreaGradientOptions[];
+};
+
+/**
+ * 차트 레전드; 기본 타입
+ * @property {string} key - 렌더링 키
+ * @property {string} axisCategory - y축 id
+ * @property {string} code - 데이터 키
+ * @property {string} name - 데이터 명칭
+ * @property {string} [nameJsx] - 데이터 명칭
+ * @property {string} unit - 데이터 단위
+ * @property {string} color - 데이터 컬러
+ * @property {string} [strokeColor] - 테두리 컬러
+ * @property {string} [strokeStyle] - 테두리 스타일
+ * @property {boolean} active - 데이터 활성화 여부 (레전드 토글 등)
+ * @property {boolean} [highlight] - 포커스 구분
+ */
+export interface ChartLegendBaseType {
+  /**
+   * 렌더링 키
+   */
+  key: string;
+  /**
+   * y축 id
+   */
+  axisCategory: string;
+  /**
+   * 데이터 키
+   */
+  code: string;
+  /**
+   * 커스텀 Dot
+   */
+  dot?: React.ReactNode;
+  /**
+   * 데이터 명칭
+   */
+  name: string;
+  /**
+   * 데이터 명칭 (JSX)
+   */
+  nameJsx?: React.ReactNode;
+  /**
+   * 데이터 단위
+   */
+  unit: string;
+  /**
+   * 데이터 컬러
+   */
+  color: string;
+  /**
+   * 데이터 활성화 여부 (레전드 토글 등)
+   */
+  active: boolean;
+  // ------------------------------ style option 개편 필요
+  /**
+   * 테두리 컬러
+   */
+  strokeColor?: string;
+  /**
+   * 테두리 스타일
+   */
+  strokeStyle?: string;
+  /**
+   * 테두리 두께
+   */
+  strokeWidth?: number;
+  /**
+   * 포커스 구분
+   */
+  highlight?: boolean;
+  /**
+   * 투명도
+   */
+  opacity?: number;
+}
+
+/**
+ * 차트 레전드; 데이터 포함 타입
+ * @property {string} key - 렌더링 키
+ * @property {string} axisCategory - y축 id
+ * @property {string} code - 데이터 키
+ * @property {string} name - 데이터 명칭
+ * @property {React.ReactNode} value - 데이터값 표현
+ * @property {string} unit - 데이터 단위
+ * @property {string} color - 데이터 컬러
+ * @property {boolean} active - 데이터 활성화 여부 (레전드 토글 등)
+ * @property {boolean} [highlight] - 포커스 구분
+ */
+export type ChartLegendDataType = ChartLegendBaseType & {
+  /**
+   * 표현될 데이터 값
+   * - 단순 number, null로는 표현하기 힘든, 복합적인 표현 방식을 고려
+   */
+  value: React.ReactNode;
+};