@nethru/kit 1.0.7 → 1.1.1

package/dist/components/charts/Chart.js

@@ -0,0 +1,379 @@
+import React, { useCallback, useEffect, useState } from "react";
+import Highcharts from 'highcharts';
+import HighchartsReactModule from 'highcharts-react-official';
+import highchartsAccessibility from 'highcharts/modules/accessibility.js';
+import highchartsAnnotations from 'highcharts/modules/annotations.js';
+import { format, formatToPercent } from "./Number";
+import * as ChartColors from "./ChartColors";
+import { grey } from "@nethru/ui/base/colors";
+
+// Handle both ES module and CommonJS exports
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const HighchartsReact = HighchartsReactModule.default || HighchartsReactModule;
+highchartsAccessibility(Highcharts);
+highchartsAnnotations(Highcharts);
+export default function Chart(props) {
+  const [legendLimitEnabled, setLegendLimitEnabled] = useState(props.legendLimit > 0);
+  const [options, setOptions] = useState(toOptions(props, legendLimitEnabled));
+  useEffect(() => {
+    if (props.delay) setTimeout(() => setOptions(toOptions(props, legendLimitEnabled, handleLegendItemClick)), props.delay);else setOptions(toOptions(props, legendLimitEnabled, handleLegendItemClick));
+    // eslint-disable-next-line
+  }, [props]);
+  const handleLegendItemClick = useCallback(() => setLegendLimitEnabled(false), []);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: options && /*#__PURE__*/_jsx(HighchartsReact, {
+      highcharts: Highcharts,
+      options: options
+    })
+  });
+}
+function toOptions(props, legendLimitEnabled, handleLegendItemClick) {
+  const {
+    title = '',
+    type,
+    categorize,
+    stacking,
+    showLegend = true,
+    showDataLabel,
+    xAxisType,
+    xAxisLabel = true,
+    xAxisLabelFormat,
+    xAxisTickInterval,
+    yAxisLabelEnabled = true,
+    yAxisLabelFormat,
+    yAxisTickInterval = null,
+    yAxisPlotLines = [],
+    opacity = 1,
+    innerSize = 0,
+    colors: customColors,
+    backgroundColor = undefined,
+    xPlotIndex,
+    dimension,
+    metrics,
+    records = [],
+    metas,
+    height = 200,
+    legendLimit,
+    legendAlign = 'center',
+    tooltip = {},
+    secondaryXAxis = []
+  } = props;
+  const {
+    outside
+  } = tooltip;
+  const pie = type === 'pie';
+  const centers = pieCenters(metrics.length);
+  const size = pieSize(metrics.length);
+  const colors = customColors ? customColors : ChartColors.preset;
+  const categories = records.map(record => record[dimension]);
+  const mainXAxis = records.map(r => r.time);
+  const chartColorHandlers = {
+    line: (colors, index) => ({
+      color: colors[index],
+      mainColor: colors[index]
+    }),
+    area: (colors, index) => ({
+      color: colors[index][0],
+      mainColor: colors[index][1]
+    }),
+    gradient: (colors, index) => ({
+      color: {
+        linearGradient: {
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 1
+        },
+        stops: [[0, `${colors[index][0]}`], [0.95, `${colors[index][1]}`]]
+      },
+      mainColor: colors[index][2]
+    })
+  };
+  const series = metrics.map(({
+    chartType,
+    metric
+  }, index) => {
+    const type = chartType === 'gradient' ? 'area' : chartType;
+    const {
+      color,
+      mainColor
+    } = chartColorHandlers[chartType](colors, index);
+    const meta = metas[metric];
+    let option = {
+      type: type,
+      name: meta ? meta.name : '',
+      data: records.map(record => {
+        const data = record.metric[metric] ?? null;
+        return pie ? {
+          name: record[dimension],
+          y: data
+        } : data;
+      }),
+      custom: {
+        type: meta ? meta.type : '',
+        pointerNames: meta?.pointerNames ?? null
+      },
+      center: centers[index] || [null, null],
+      size: size,
+      point: {
+        events: {
+          render: function () {
+            this.graphic.attr({
+              zIndex: this.y === 0 ? -1 : ZIndex.COMPARE_CHART_BASE - index
+            });
+          }
+        }
+      },
+      showInLegend: pie && index > 0 ? false : true,
+      color: color,
+      lineColor: mainColor,
+      lineWidth: 2,
+      marker: {
+        fillColor: mainColor
+      },
+      metric: metric
+    };
+    if (legendLimitEnabled) option = {
+      ...option,
+      visible: index < legendLimit
+    };
+    return option;
+  });
+  const yPlotLines = yAxisPlotLines.map((line, index) => {
+    return {
+      value: line.value,
+      width: 1,
+      color: line.color,
+      dashStyle: "Dash",
+      zIndex: ZIndex.AVERAGE_LINE_BASE + index,
+      label: {
+        text: line.label,
+        align: line.labelAlign,
+        style: {
+          color: line.labelColor,
+          opacity: 0.7,
+          fontSize: "12px",
+          padding: '1px 5px'
+        },
+        y: -8,
+        useHTML: true
+      }
+    };
+  });
+  const xPlotBands = [{
+    from: xPlotIndex,
+    to: categories.length - 1,
+    color: 'rgba(0, 0, 0, 0.03)',
+    zIndex: ZIndex.NOW_BAND
+  }];
+  const xPlotLines = [{
+    color: "#aaa",
+    width: 1,
+    value: xPlotIndex,
+    zIndex: ZIndex.NOW_BORDER,
+    label: {
+      text: "현재",
+      rotation: 0,
+      x: 5,
+      y: 13,
+      style: {
+        fontWeight: 500,
+        lineHeight: "16.8px",
+        color: "#333",
+        fontSize: "12px"
+      }
+    }
+  }];
+  return {
+    chart: {
+      type: type.toLowerCase(),
+      height: height,
+      backgroundColor,
+      events: {
+        render: secondaryXAxis.length === 0 ? undefined : function () {
+          const chart = this;
+          const visibleSeries = chart.series.filter(s => s.visible);
+          let newCategories = null;
+          if (visibleSeries.length === 1 && visibleSeries[0].options.metric === 'prev') {
+            newCategories = secondaryXAxis;
+          } else {
+            newCategories = mainXAxis;
+          }
+          const isSame = JSON.stringify(chart.xAxis[0].categories) === JSON.stringify(newCategories);
+          if (!isSame) {
+            chart.xAxis[0].setCategories(newCategories);
+          }
+        }
+      }
+    },
+    title: {
+      text: ''
+    },
+    subtitle: {
+      text: title
+    },
+    colors: colors,
+    xAxis: {
+      type: xAxisType,
+      labels: {
+        enabled: xAxisLabel,
+        autoRotation: false,
+        format: xAxisLabelFormat ? `{value:${xAxisLabelFormat}}` : undefined,
+        style: {
+          color: grey[600]
+        }
+      },
+      categories: categorize ? categories : undefined,
+      tickWidth: 1,
+      tickInterval: xAxisTickInterval ?? (xAxisType === 'datetime' ? records.length / 20 : 1),
+      lineColor: grey[900],
+      tickColor: grey[900],
+      crosshair: true,
+      startOnTick: true,
+      plotBands: xPlotIndex !== undefined ? xPlotBands : undefined,
+      plotLines: xPlotIndex !== undefined ? xPlotLines : undefined
+    },
+    yAxis: {
+      title: {
+        text: ''
+      },
+      labels: {
+        enabled: yAxisLabelEnabled,
+        formatter: yAxisLabelFormat,
+        style: {
+          color: grey[600]
+        }
+      },
+      tickInterval: yAxisTickInterval,
+      gridLineColor: '#f8f8f8',
+      plotLines: yPlotLines
+    },
+    plotOptions: {
+      series: {
+        opacity: opacity,
+        stacking: stackingType(stacking),
+        showInLegend: showLegend,
+        dataLabels: {
+          enabled: showDataLabel
+        },
+        colorByPoint: pie,
+        lineWidth: 2,
+        marker: {
+          enabled: false,
+          symbol: 'circle'
+        },
+        cursor: 'pointer',
+        point: {
+          events: {}
+        },
+        events: {
+          legendItemClick: handleLegendItemClick
+        }
+      },
+      pie: {
+        allowPointSelect: true,
+        innerSize: `${innerSize}%`
+      }
+    },
+    legend: {
+      align: legendAlign,
+      verticalAlign: 'top',
+      enabled: showLegend
+    },
+    tooltip: {
+      followPointer: false,
+      shared: true,
+      shadow: false,
+      useHTML: true,
+      formatter: function () {
+        return tooltipFormatter(this, tooltip);
+      },
+      outside: outside,
+      style: {
+        zIndex: 2000
+      }
+    },
+    series: series,
+    time: {
+      useUTC: false,
+      getTimezoneOffset: function () {
+        return new Date().getTimezoneOffset();
+      }
+    },
+    credits: {
+      enabled: false
+    }
+  };
+}
+const tooltipFormatter = (_this, props) => {
+  const {
+    headerVisible = true,
+    dateFormat,
+    headerTime,
+    legendColors = []
+  } = props;
+  let tooltip = '<div style="font-size: 14px;padding: 12px; min-width: 200px;">';
+  if (headerVisible) {
+    const xDate = new Date(_this.x);
+    const date = formatDate(xDate, dateFormat);
+    tooltip += `<div style="display: flex; justify-content: space-between; font-weight: bold; font-size: 12px;">
+                            <span style="font-size: 12px; color: #333;">${date}</span>`;
+    if (headerTime) {
+      const time = formatDate(xDate, '%H:%M');
+      tooltip += `<span style="font-size: 12px; color: #333;">${time}</span>`;
+    }
+    tooltip += '</div>';
+  }
+  _this.points.forEach(point => {
+    const type = point.series.options.custom.type;
+    const value = type !== 'TO_PERCENT' ? format(point.y, type) : formatToPercent(_this.percentage / 100);
+    const name = point.series.name;
+    let color = type !== 'TO_PERCENT' ? point.series.color : point.color;
+    if (legendColors.length !== 0) {
+      color = legendColors[point.series.index];
+    }
+    tooltip += `<div style="display: flex; flex-direction: column; gap: 8px;">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px;">
+                  <span style="width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; background-color: ${color}"></span>
+                  <span style="flex-grow: 1; font-size: 14px; padding-right: 20px;">${name}</span>
+                  <span style="font-weight: bold; font-size: 14px;">${value}</span>
+                </div>
+              </div>`;
+  });
+  tooltip += '</div>';
+  return tooltip;
+};
+function formatDate(data, format) {
+  return Highcharts.dateFormat(format, data.getTime() - data.getTimezoneOffset() * 60000);
+}
+const ZIndex = {
+  AVERAGE_LINE_BASE: 10,
+  COMPARE_CHART_BASE: 5,
+  NOW_BORDER: 2,
+  NOW_BAND: 1
+};
+function stackingType(stacking) {
+  return stacking ? stacking.toLowerCase() : '';
+}
+function pieCenters(count) {
+  switch (count) {
+    case 2:
+      return [['25%', '50%'], ['75%', '50%']];
+    case 3:
+      return [['25%', '25%'], ['75%', '25%'], ['50%', '75%']];
+    case 4:
+      return [['25%', '25%'], ['75%', '25%'], ['25%', '75%'], ['75%', '75%']];
+    default:
+      return [];
+  }
+}
+function pieSize(count) {
+  switch (count) {
+    case 3:
+      return '50%';
+    case 4:
+      return '25%';
+    default:
+      return null;
+  }
+}

package/dist/components/charts/ChartColors.js

@@ -0,0 +1,11 @@
+import { blue, green, lime, orange, purple, red, yellow } from "@nethru/ui/base/colors";
+import { alpha } from "@mui/material";
+export const all = [[blue[500]], [purple[500], '#4168a6', '#81a7e1'], [green[500], '#debb7f', '#ecdbbe'], [yellow[500], '#1b8286', '#4ab3b6'], [red[500]], [orange[500]], [lime[500]], ['#54AAF9'], ['#BB4ECD'], ['#6DDBBA'], ['#FFE81C'], ['#FA7EBA'], ['#F55713'], ['#51B304'], ['#1559B2'], ['#733FAB'], ['#1C7B5F'], ['#D87500'], ['#C91E48'], ['#2F862F']];
+export const colors = [[blue[400], blue[500]], [purple[400], purple[500]], [green[400], green[500]], [yellow[400], yellow[500]], [red[400], red[500]], [orange[400], orange[500]], [lime[400], lime[500]]];
+export const gradient = [[alpha(blue[500], 0.2), 'transparent', blue[300]], [alpha(purple[500], 0.2), 'transparent', purple[500]], [alpha(green[500], 0.2), 'transparent', green[500]], [alpha(yellow[500], 0.2), 'transparent', yellow[500]], [alpha(red[500], 0.2), 'transparent', red[500]], [alpha(orange[500], 0.2), 'transparent', orange[500]], [alpha(lime[500], 0.2), 'transparent', lime[500]]];
+export const grey = ['#333', '#666', '#999'];
+export const preset = ['#003f5c', '#a05195', '#665191', '#2f4b7c', '#d45087', '#f95d6a', '#ff7c43', '#ffa600'];
+export const perRatio = ['#df5645', '#9fcc2e', '#333'];
+export const compare = '#fa9f1b';
+export const backgroundColor = '#fff';
+export const main = all.map(color => color[0]);

package/dist/components/charts/ColumnChart.js

@@ -0,0 +1,118 @@
+import React, { useMemo } from 'react';
+import Highcharts from 'highcharts';
+import HighchartsReactModule from 'highcharts-react-official';
+import 'highcharts/modules/pattern-fill.js';
+
+// Handle both ES module and CommonJS exports
+import { jsx as _jsx } from "react/jsx-runtime";
+const HighchartsReact = HighchartsReactModule.default || HighchartsReactModule;
+const ColumnChart = ({
+  data,
+  width,
+  height = 230
+}) => {
+  const series = useMemo(() => {
+    return data.series.map((item, sindex) => ({
+      ...item,
+      data: item.data.map((value, index) => ({
+        y: value,
+        color: data.colors[index % data.colors.length] + alphas[sindex % alphas.length]
+      }))
+    }));
+  }, [data]);
+  const colors = useMemo(() => {
+    return data.series.map((_, index) => data.colors[0] + alphas[index % alphas.length]);
+  }, [data]);
+  const options = useMemo(() => {
+    return {
+      chart: {
+        type: 'column',
+        backgroundColor: 'transparent',
+        width: width,
+        height: height,
+        style: {
+          fontFamily: fontFamily
+        }
+      },
+      title: {
+        text: undefined
+      },
+      tooltip: {
+        pointFormat: '<span><b>{point.y}</b></span>',
+        style: {
+          fontFamily: fontFamily,
+          fontSize: '13px',
+          fontWeight: '100'
+        },
+        useHTML: true
+      },
+      plotOptions: {
+        column: {
+          //size: size
+        }
+      },
+      xAxis: {
+        categories: data.categories,
+        crosshair: true,
+        labels: {
+          style: {
+            color: '#777',
+            fontFamily: fontFamily,
+            fontWeight: '400'
+          }
+        },
+        lineColor: '#aaa'
+      },
+      yAxis: {
+        title: {
+          text: undefined
+        },
+        labels: {
+          style: {
+            fontFamily: fontFamily,
+            fontSize: '12px',
+            fontWeight: '100'
+          }
+        },
+        gridLineColor: '#f9f9f9'
+      },
+      legend: {
+        layout: 'vertical',
+        itemStyle: {
+          fontFamily: fontFamily,
+          fontSize: '12px',
+          fontWeight: '100'
+        },
+        useHTML: true
+      },
+      series: series,
+      colors: colors,
+      credits: {
+        enabled: false
+      },
+      accessibility: {
+        enabled: false
+      }
+    };
+  }, [data, width, height, series, colors]);
+  return /*#__PURE__*/_jsx("div", {
+    style: styles.chartWrapper,
+    children: /*#__PURE__*/_jsx(HighchartsReact, {
+      highcharts: Highcharts,
+      options: options
+    })
+  });
+};
+export default ColumnChart;
+const fontFamily = 'Pretendard, -apple-system, BlinkMacSystemFont, sans-serif';
+const styles = {
+  chartWrapper: {
+    background: 'transparent',
+    textAlign: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+};
+const alphas = ['ff', 'bb', '77', '33'];

package/dist/components/charts/Number.js

@@ -0,0 +1,48 @@
+export function toValue(value) {
+  return value && typeof value === 'object' ? value.value : value;
+}
+export function toPercent(value) {
+  return Math.round(value * 100 * 100) / 100;
+}
+export function formatNumber(value) {
+  return value !== undefined ? value.toLocaleString() : '-';
+}
+export function formatToPercent(value) {
+  return formatPercent(toPercent(value));
+}
+export function formatPercent(value) {
+  return value !== undefined ? `${value.toLocaleString()}%` : '-';
+}
+export function formatDiffPercent(value) {
+  return value !== undefined ? `${value > 0 ? '+' : ''}${formatToPercent(value)}` : '-';
+}
+export function formatDuration(value) {
+  value = toValue(value);
+  if (!value) return '-';
+  let day = Math.floor(value / (60 * 60 * 24));
+  let hour = Math.floor(value / (60 * 60)) - day * 24;
+  let minute = Math.floor(value / 60) - (day * 24 + hour) * 60;
+  let second = Math.round(value % 60);
+  day = day > 0 ? `${day.toLocaleString()}일 ` : '';
+  hour = hour > 0 ? `${hour >= 10 ? hour : '0' + hour}시간 ` : '';
+  minute = `${minute >= 10 ? minute : '0' + minute}분 `;
+  second = `${second >= 10 ? second : '0' + second}초`;
+  return `${day}${hour}${minute}${second}`;
+}
+export function formatBytes(value) {
+  return value !== undefined ? `${value.toLocaleString()} bytes` : '-';
+}
+export function format(value, type) {
+  switch (type) {
+    case 'TO_PERCENT':
+      return formatToPercent(value);
+    case 'DURATION':
+      return formatDuration(value);
+    case 'BYTES':
+      return formatBytes(value);
+    case 'PERCENT':
+      return formatPercent(value);
+    default:
+      return formatNumber(value);
+  }
+}