beatsaber-bot-core 0.2.0-dev.9 → 0.2.0-rc.10

package/dist/esm/components/components/scoregraph.js

@@ -0,0 +1,299 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { processAccGraphs, processUnderswings } from "../utils/bl/bsorReplayAcc";
+import {
+  createDistanceWeightFunction,
+  createMinMaxCounter
+} from "../utils/bl/beatleader";
+import getStatistic from "../utils/bl/stastic";
+import Chart from "chart.js/auto";
+import { createCanvas } from "@napi-rs/canvas";
+function formatNumber(num, digits = 2, addSign = false, notANumber = null) {
+  if (!Number.isFinite(num)) {
+    return notANumber;
+  }
+  return (addSign && num > 0 ? "+" : "") + num.toLocaleString("zh-CN", {
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits
+  });
+}
+function timeToLabel(time) {
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time % 60);
+  return minutes + ":" + seconds.toString().padStart(2, "0");
+}
+function processChartData(chartData, resolution, smoothPeriodPercentage, weightFunctionSteepness) {
+  const data = [];
+  if (chartData.length === 0 || resolution === 0) return data;
+  const songDuration = chartData[chartData.length - 1][1];
+  const distanceWeightFunction = createDistanceWeightFunction(
+    songDuration * smoothPeriodPercentage,
+    weightFunctionSteepness
+  );
+  for (let i = 0; i < resolution; i += 1) {
+    const songTime = songDuration * i / (resolution - 1);
+    let sum = 0;
+    let divider = 0;
+    for (let j = 0; j < chartData.length; j += 1) {
+      const item = chartData[j];
+      const weight = distanceWeightFunction.getWeight(item[1] - songTime);
+      sum += item[0] * weight;
+      divider += weight;
+    }
+    if (divider === 0) continue;
+    const value = 100 + sum / divider * 15;
+    data.push(value);
+  }
+  return data;
+}
+function ScoreGraph({
+  scoreId,
+  scoreInfo,
+  statistic,
+  bsor,
+  height,
+  width
+}) {
+  const canvas = createCanvas(width * 4, height * 4);
+  const setupChart = (canvas2, chartData, underswingsData2, beatSavior2) => {
+    var _a, _b, _c, _d;
+    if (!canvas2 || !chartData || !Object.keys(chartData).length) return;
+    const title = (underswingsData2 == null ? void 0 : underswingsData2.noUnderswingsScore) > (underswingsData2 == null ? void 0 : underswingsData2.score) ? `Lost by underswings: ${formatNumber(underswingsData2.noUnderswingsScore - underswingsData2.score, 0)}pts, ${formatNumber(
+      underswingsData2.noUnderswingsAcc - underswingsData2.acc,
+      2
+    )}% acc` + ((underswingsData2 == null ? void 0 : underswingsData2.noUnderswingsPp) && (underswingsData2 == null ? void 0 : underswingsData2.noUnderswingsPp) > (underswingsData2 == null ? void 0 : underswingsData2.pp) ? `, ${formatNumber(underswingsData2.noUnderswingsPp - underswingsData2.pp, 2)}pp` : "") : null;
+    const labels = chartData.times.map(timeToLabel);
+    const minMaxCounter = createMinMaxCounter(0, 115, 1);
+    const hands = [];
+    if ((_a = beatSavior2 == null ? void 0 : beatSavior2.stats) == null ? void 0 : _a.accLeft) {
+      hands.push("red");
+    }
+    if ((_b = beatSavior2 == null ? void 0 : beatSavior2.stats) == null ? void 0 : _b.accRight) {
+      hands.push("blue");
+    }
+    if (hands.length == 2) {
+      hands.push("total");
+    }
+    for (let i = 0; i < chartData.times.length; i++) {
+      hands.forEach((saberType) => {
+        minMaxCounter.update(chartData.realScoreBySaber[saberType][i]);
+        minMaxCounter.update(chartData.fullSwingBySaber[saberType][i]);
+      });
+    }
+    let datasets = [];
+    if ((_c = beatSavior2 == null ? void 0 : beatSavior2.stats) == null ? void 0 : _c.accLeft) {
+      datasets.push({
+        yAxisID: "score",
+        label: "Accuracy (left)",
+        data: chartData.fullSwingBySaber.red,
+        type: "line",
+        borderColor: "#ee5555",
+        backgroundColor: "#ee5555",
+        borderWidth: 8,
+        pointRadius: 0,
+        cubicInterpolationMode: "monotone",
+        tension: 0.4,
+        spanGaps: true,
+        order: 3
+      });
+      datasets.push({
+        yAxisID: "score",
+        label: "Underswing (left)",
+        data: chartData.realScoreBySaber.red,
+        type: "line",
+        fill: "-1",
+        borderColor: "#ee555555",
+        backgroundColor: "#ee555555",
+        borderWidth: 2,
+        pointRadius: 0,
+        cubicInterpolationMode: "monotone",
+        tension: 0.4,
+        spanGaps: true,
+        order: 4
+      });
+    }
+    if ((_d = beatSavior2 == null ? void 0 : beatSavior2.stats) == null ? void 0 : _d.accRight) {
+      datasets.push({
+        yAxisID: "score",
+        label: "Accuracy (right)",
+        data: chartData.fullSwingBySaber.blue,
+        type: "line",
+        borderColor: "#5555ee",
+        backgroundColor: "#5555ee",
+        borderWidth: 8,
+        pointRadius: 0,
+        cubicInterpolationMode: "monotone",
+        tension: 0.4,
+        spanGaps: true,
+        order: 5
+      });
+      datasets.push({
+        yAxisID: "score",
+        label: "Underswing (right)",
+        data: chartData.realScoreBySaber.blue,
+        type: "line",
+        fill: "-1",
+        borderColor: "#5555ee55",
+        backgroundColor: "#5555ee55",
+        borderWidth: 2,
+        pointRadius: 0,
+        cubicInterpolationMode: "monotone",
+        tension: 0.4,
+        spanGaps: true,
+        order: 6
+      });
+    }
+    datasets = datasets.concat([
+      {
+        yAxisID: "score",
+        label: "Accuracy",
+        data: chartData.fullSwingBySaber.total,
+        type: "line",
+        borderColor: "white",
+        backgroundColor: "white",
+        borderWidth: 8,
+        pointRadius: 0,
+        cubicInterpolationMode: "monotone",
+        tension: 0.4,
+        spanGaps: true,
+        order: 1
+      },
+      {
+        yAxisID: "score",
+        label: "Underswing",
+        data: chartData.realScoreBySaber.total,
+        type: "line",
+        fill: "-1",
+        borderColor: "#aaaaaa55",
+        backgroundColor: "#aaaaaa55",
+        borderWidth: 2,
+        pointRadius: 0,
+        cubicInterpolationMode: "monotone",
+        tension: 0.4,
+        spanGaps: true,
+        order: 2
+      },
+      {
+        yAxisID: "score",
+        label: "Score",
+        data: chartData.realScoreBySaber.total,
+        type: "line",
+        borderColor: "#aaaaaa",
+        backgroundColor: "#aaaaaa",
+        borderWidth: 8,
+        pointRadius: 0,
+        cubicInterpolationMode: "monotone",
+        tension: 0.4,
+        spanGaps: true,
+        order: 0
+      }
+    ]);
+    new Chart(canvas2, {
+      data: { labels, datasets },
+      options: {
+        responsive: false,
+        devicePixelRatio: 1,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: false
+          },
+          title: {
+            display: !!(title == null ? void 0 : title.length),
+            text: title,
+            color: "white",
+            font: {
+              weight: "normal",
+              size: 60
+            },
+            position: "bottom",
+            padding: { top: 5, bottom: 0 }
+          },
+          tooltip: {
+            callbacks: {
+              title(tooltipItems) {
+                const item = tooltipItems[0];
+                const labels2 = item.chart.data.labels;
+                return labels2[item.dataIndex] + " (10 seconds average)";
+              },
+              label(ctx) {
+                const datasetLabel = ctx.dataset.label;
+                let percentage;
+                let value;
+                switch (datasetLabel) {
+                  case "Underswing (left)":
+                    value = ctx.raw - chartData.fullSwingBySaber.red[ctx.dataIndex];
+                    percentage = value / 115;
+                    return `${datasetLabel}: ${formatNumber(value, 1)} (${formatNumber(percentage * 100, 2)}%)`;
+                  case "Underswing (right)":
+                    value = ctx.raw - chartData.fullSwingBySaber.blue[ctx.dataIndex];
+                    percentage = value / 115;
+                    return `${datasetLabel}: ${formatNumber(value, 1)} (${formatNumber(percentage * 100, 2)}%)`;
+                  case "Underswing":
+                    value = ctx.raw - chartData.fullSwingBySaber.total[ctx.dataIndex];
+                    percentage = value / 115;
+                    return `${datasetLabel}: ${formatNumber(value, 1)} (${formatNumber(percentage * 100, 2)}%)`;
+                  case "Score":
+                    value = ctx.raw;
+                    percentage = value / 115;
+                    return `${datasetLabel}: ${formatNumber(value, 1)} (${formatNumber(percentage * 100, 2)}%)`;
+                  default:
+                    value = ctx.raw;
+                    percentage = value / 115;
+                    return `${datasetLabel}: ${formatNumber(value - 100, 1)} (${formatNumber(percentage * 100, 2)}%)`;
+                }
+              }
+            }
+          }
+        },
+        scales: {
+          x: {
+            ticks: {
+              autoSkip: true,
+              autoSkipPadding: 4,
+              color: "white",
+              font: {
+                weight: "normal",
+                size: 60
+              }
+            }
+          },
+          y: {
+            display: true,
+            min: minMaxCounter.minValue,
+            max: minMaxCounter.maxValue,
+            ticks: {
+              autoSkip: true,
+              autoSkipPadding: 4,
+              color: "white",
+              font: {
+                weight: "normal",
+                size: 60
+              }
+            }
+          },
+          score: {
+            display: false,
+            min: minMaxCounter.minValue,
+            max: minMaxCounter.maxValue,
+            ticks: {
+              autoSkip: true,
+              autoSkipPadding: 4,
+              color: "white"
+            }
+          }
+        }
+      }
+    });
+  };
+  const beatSavior = getStatistic(scoreInfo, scoreId, statistic);
+  const replayAccGraphs = processAccGraphs(bsor);
+  const underswingsData = processUnderswings(bsor);
+  setupChart(canvas, replayAccGraphs, underswingsData, beatSavior);
+  const dataURL = canvas.toDataURL("image/png");
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("img", { src: dataURL, width, height }) }) });
+}
+export {
+  ScoreGraph as default,
+  formatNumber
+};
+//# sourceMappingURL=scoregraph.js.map

package/dist/esm/components/components/scoregraph.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/components/scoregraph.tsx"],"sourcesContent":["import { processAccGraphs, processUnderswings } from '../utils/bl/bsorReplayAcc'\nimport {\n  createDistanceWeightFunction,\n  createMinMaxCounter,\n} from '../utils/bl/beatleader'\nimport getStatistic from '../utils/bl/stastic'\nimport Chart from 'chart.js/auto'\nimport { BSOR, Score } from '@/service/api/interfaces/beatleader'\nimport { createCanvas } from '@napi-rs/canvas'\n\nexport function formatNumber(\n  num: number,\n  digits = 2,\n  addSign = false,\n  notANumber = null\n) {\n  if (!Number.isFinite(num)) {\n    return notANumber\n  }\n\n  return (\n    (addSign && num > 0 ? '+' : '') +\n    num.toLocaleString('zh-CN', {\n      minimumFractionDigits: digits,\n      maximumFractionDigits: digits,\n    })\n  )\n}\n\nfunction timeToLabel(time: any) {\n  const minutes = Math.floor(time / 60)\n  const seconds = Math.floor(time % 60)\n  return minutes + ':' + seconds.toString().padStart(2, '0')\n}\n\nfunction processChartData(\n  chartData: any,\n  resolution: any,\n  smoothPeriodPercentage: any,\n  weightFunctionSteepness: any\n) {\n  const data = [] as any[]\n  if (chartData.length === 0 || resolution === 0) return data\n\n  const songDuration = chartData[chartData.length - 1][1]\n  const distanceWeightFunction = createDistanceWeightFunction(\n    songDuration * smoothPeriodPercentage,\n    weightFunctionSteepness\n  )\n\n  for (let i = 0.0; i < resolution; i += 1.0) {\n    const songTime = (songDuration * i) / (resolution - 1)\n\n    let sum = 0\n    let divider = 0\n\n    for (let j = 0.0; j < chartData.length; j += 1.0) {\n      const item = chartData[j]\n      const weight = distanceWeightFunction.getWeight(item[1] - songTime)\n\n      sum += item[0] * weight\n      divider += weight\n    }\n\n    if (divider === 0) continue\n    const value = 100 + (sum / divider) * 15\n    data.push(value)\n  }\n\n  return data\n}\n\n// get score Statics\nexport default function ScoreGraph({\n  scoreId,\n  scoreInfo,\n  statistic,\n  bsor,\n  height,\n  width,\n}: {\n  scoreId: number\n  scoreInfo: Score\n  statistic: any\n  bsor: BSOR\n  height: number\n  width: number\n}) {\n  const canvas = createCanvas(width * 4, height * 4)\n\n  const setupChart = (\n    canvas: any,\n    chartData: any,\n    underswingsData: any,\n    beatSavior: any\n  ) => {\n    if (!canvas || !chartData || !Object.keys(chartData).length) return\n\n    const title =\n      underswingsData?.noUnderswingsScore > underswingsData?.score\n        ? `Lost by underswings: ${formatNumber(underswingsData.noUnderswingsScore - underswingsData.score, 0)}pts, ${formatNumber(\n            underswingsData.noUnderswingsAcc - underswingsData.acc,\n            2\n          )}% acc` +\n          (underswingsData?.noUnderswingsPp &&\n          underswingsData?.noUnderswingsPp > underswingsData?.pp\n            ? `, ${formatNumber(underswingsData.noUnderswingsPp - underswingsData.pp, 2)}pp`\n            : '')\n        : null\n\n    const labels = chartData.times.map(timeToLabel)\n\n    const minMaxCounter = createMinMaxCounter(0, 115, 1.0)\n\n    const hands = [] as any\n    if (beatSavior?.stats?.accLeft) {\n      hands.push('red')\n    }\n    if (beatSavior?.stats?.accRight) {\n      hands.push('blue')\n    }\n    if (hands.length == 2) {\n      hands.push('total')\n    }\n\n    for (let i = 0; i < chartData.times.length; i++) {\n      hands.forEach((saberType: any) => {\n        minMaxCounter.update(chartData.realScoreBySaber[saberType][i])\n        minMaxCounter.update(chartData.fullSwingBySaber[saberType][i])\n      })\n    }\n    let datasets = [] as any[]\n    if (beatSavior?.stats?.accLeft) {\n      datasets.push({\n        yAxisID: 'score',\n        label: 'Accuracy (left)',\n        data: chartData.fullSwingBySaber.red,\n        type: 'line',\n        borderColor: '#ee5555',\n        backgroundColor: '#ee5555',\n        borderWidth: 8,\n        pointRadius: 0,\n        cubicInterpolationMode: 'monotone',\n        tension: 0.4,\n        spanGaps: true,\n        order: 3,\n      })\n      datasets.push({\n        yAxisID: 'score',\n        label: 'Underswing (left)',\n        data: chartData.realScoreBySaber.red,\n        type: 'line',\n        fill: '-1',\n        borderColor: '#ee555555',\n        backgroundColor: '#ee555555',\n        borderWidth: 2,\n        pointRadius: 0,\n        cubicInterpolationMode: 'monotone',\n        tension: 0.4,\n        spanGaps: true,\n        order: 4,\n      })\n    }\n\n    if (beatSavior?.stats?.accRight) {\n      datasets.push({\n        yAxisID: 'score',\n        label: 'Accuracy (right)',\n        data: chartData.fullSwingBySaber.blue,\n        type: 'line',\n        borderColor: '#5555ee',\n        backgroundColor: '#5555ee',\n        borderWidth: 8,\n        pointRadius: 0,\n        cubicInterpolationMode: 'monotone',\n        tension: 0.4,\n        spanGaps: true,\n        order: 5,\n      })\n      datasets.push({\n        yAxisID: 'score',\n        label: 'Underswing (right)',\n        data: chartData.realScoreBySaber.blue,\n        type: 'line',\n        fill: '-1',\n        borderColor: '#5555ee55',\n        backgroundColor: '#5555ee55',\n        borderWidth: 2,\n        pointRadius: 0,\n        cubicInterpolationMode: 'monotone',\n        tension: 0.4,\n        spanGaps: true,\n        order: 6,\n      })\n    }\n\n    datasets = datasets.concat([\n      {\n        yAxisID: 'score',\n        label: 'Accuracy',\n        data: chartData.fullSwingBySaber.total,\n        type: 'line',\n        borderColor: 'white',\n        backgroundColor: 'white',\n        borderWidth: 8,\n        pointRadius: 0,\n        cubicInterpolationMode: 'monotone',\n        tension: 0.4,\n        spanGaps: true,\n        order: 1,\n      },\n      {\n        yAxisID: 'score',\n        label: 'Underswing',\n        data: chartData.realScoreBySaber.total,\n        type: 'line',\n        fill: '-1',\n        borderColor: '#aaaaaa55',\n        backgroundColor: '#aaaaaa55',\n        borderWidth: 2,\n        pointRadius: 0,\n        cubicInterpolationMode: 'monotone',\n        tension: 0.4,\n        spanGaps: true,\n        order: 2,\n      },\n      {\n        yAxisID: 'score',\n        label: 'Score',\n        data: chartData.realScoreBySaber.total,\n        type: 'line',\n        borderColor: '#aaaaaa',\n        backgroundColor: '#aaaaaa',\n        borderWidth: 8,\n        pointRadius: 0,\n        cubicInterpolationMode: 'monotone',\n        tension: 0.4,\n        spanGaps: true,\n        order: 0,\n      },\n    ])\n\n    new Chart(canvas, {\n      data: { labels, datasets },\n      options: {\n        responsive: false,\n        devicePixelRatio: 1,\n        maintainAspectRatio: false,\n        plugins: {\n          legend: {\n            display: false,\n          },\n          title: {\n            display: !!title?.length,\n            text: title as any,\n            color: 'white',\n            font: {\n              weight: 'normal',\n              size: 60,\n            },\n            position: 'bottom',\n            padding: { top: 5, bottom: 0 },\n          },\n          tooltip: {\n            callbacks: {\n              title(tooltipItems) {\n                const item = tooltipItems[0]\n                const labels = item.chart.data.labels as any[]\n                return labels[item.dataIndex] + ' (10 seconds average)'\n              },\n              label(ctx: any) {\n                const datasetLabel = ctx.dataset.label\n\n                let percentage\n                let value\n\n                switch (datasetLabel) {\n                  case 'Underswing (left)':\n                    value =\n                      ctx.raw - chartData.fullSwingBySaber.red[ctx.dataIndex]\n                    percentage = value / 115.0\n                    return `${datasetLabel}: ${formatNumber(value, 1)} (${formatNumber(percentage * 100, 2)}%)`\n                  case 'Underswing (right)':\n                    value =\n                      ctx.raw - chartData.fullSwingBySaber.blue[ctx.dataIndex]\n                    percentage = value / 115.0\n                    return `${datasetLabel}: ${formatNumber(value, 1)} (${formatNumber(percentage * 100, 2)}%)`\n                  case 'Underswing':\n                    value =\n                      ctx.raw - chartData.fullSwingBySaber.total[ctx.dataIndex]\n                    percentage = value / 115.0\n                    return `${datasetLabel}: ${formatNumber(value, 1)} (${formatNumber(percentage * 100, 2)}%)`\n                  case 'Score':\n                    value = ctx.raw\n                    percentage = value / 115.0\n                    return `${datasetLabel}: ${formatNumber(value, 1)} (${formatNumber(percentage * 100, 2)}%)`\n                  default:\n                    value = ctx.raw\n                    percentage = value / 115.0\n                    return `${datasetLabel}: ${formatNumber(value - 100.0, 1)} (${formatNumber(percentage * 100, 2)}%)`\n                }\n              },\n            },\n          },\n        },\n        scales: {\n          x: {\n            ticks: {\n              autoSkip: true,\n              autoSkipPadding: 4,\n              color: 'white',\n              font: {\n                weight: 'normal',\n                size: 60,\n              },\n            },\n          },\n          y: {\n            display: true,\n            min: minMaxCounter.minValue,\n            max: minMaxCounter.maxValue,\n            ticks: {\n              autoSkip: true,\n              autoSkipPadding: 4,\n              color: 'white',\n              font: {\n                weight: 'normal',\n                size: 60,\n              },\n            },\n          },\n          score: {\n            display: false,\n            min: minMaxCounter.minValue,\n            max: minMaxCounter.maxValue,\n            ticks: {\n              autoSkip: true,\n              autoSkipPadding: 4,\n              color: 'white',\n            },\n          },\n        },\n      },\n    })\n  }\n  const beatSavior = getStatistic(scoreInfo, scoreId, statistic)\n  const replayAccGraphs = processAccGraphs(bsor)\n  const underswingsData = processUnderswings(bsor)\n  setupChart(canvas, replayAccGraphs, underswingsData, beatSavior)\n  const dataURL = canvas.toDataURL('image/png')\n  return (\n    <>\n      <div>\n        <img src={dataURL} width={width} height={height} />\n      </div>\n    </>\n  )\n}\n"],"mappings":"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","names":["canvas","underswingsData","beatSavior","labels"]}

package/dist/esm/components/components/skill-graph.js

@@ -0,0 +1,211 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const getPoint = (center, edgePoint, edgeFactor, pointFactor) => {
+  const factorY = (center.y - edgePoint.y) / edgeFactor;
+  const factorX = (center.x - edgePoint.x) / edgeFactor;
+  return {
+    x: center.x - pointFactor * factorX,
+    y: center.y - pointFactor * factorY
+  };
+};
+function SkillGraph({
+  factorA = 0.4,
+  factorB = 0.2,
+  factorC = 0.2
+}) {
+  const base = 0.4;
+  const sqrt3 = Math.sqrt(3);
+  const centerPoint = {
+    x: 60,
+    y: 80 / sqrt3 + 10
+  };
+  const edgePointA = {
+    x: 20,
+    y: 40 / sqrt3 + 10
+  };
+  const edgePointB = {
+    x: 100,
+    y: 40 / sqrt3 + 10
+  };
+  const edgePointC = {
+    x: 60,
+    y: 160 / sqrt3 + 10
+  };
+  const PA = getPoint(centerPoint, edgePointA, base, factorA);
+  const PB = getPoint(centerPoint, edgePointB, base, factorB);
+  const PC = getPoint(centerPoint, edgePointC, base, factorC);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      height: "145",
+      viewBox: `0 0 125 125`,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: centerPoint.x,
+            cy: centerPoint.y,
+            r: 80 / sqrt3,
+            className: "fill-gray-100/30",
+            filter: "url(#blur)"
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: PA.x, cy: PA.y }),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: edgePointA.x - 10,
+            y: edgePointA.y,
+            fill: "url(#gradient1)",
+            className: "text-[8px] font-bold text-white",
+            children: "Acc"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "text",
+          {
+            x: edgePointA.x - 20,
+            y: edgePointA.y + 10,
+            fill: "url(#gradient1)",
+            className: "text-[8px] font-bold text-white",
+            children: [
+              (factorA * 100).toFixed(2),
+              "%"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: edgePointB.x - 6,
+            y: edgePointB.y,
+            fill: "url(#gradient1)",
+            className: "text-[8px] font-bold text-white",
+            children: "Tech"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "text",
+          {
+            x: edgePointB.x - 6,
+            y: edgePointB.y + 8,
+            fill: "url(#gradient1)",
+            className: "text-[8px] font-bold text-white",
+            children: [
+              (factorB * 100).toFixed(2),
+              "%"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: edgePointC.x - 6,
+            y: edgePointC.y + 2,
+            fill: "url(#gradient1)",
+            className: "text-[8px] font-bold text-white",
+            children: "Pass"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "text",
+          {
+            x: edgePointC.x - 8,
+            y: edgePointC.y + 12,
+            fill: "url(#gradient1)",
+            className: "text-[8px] font-bold text-white",
+            children: [
+              (factorC * 100).toFixed(2),
+              "%"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: PB.x, cy: PB.y }),
+        /* @__PURE__ */ jsx("circle", { cx: PC.x, cy: PC.y }),
+        /* @__PURE__ */ jsx("line", { x1: PA.x, y1: PA.y, x2: PC.x, y2: PC.y }),
+        /* @__PURE__ */ jsx("line", { x1: PA.x, y1: PA.y, x2: PB.x, y2: PB.y }),
+        /* @__PURE__ */ jsx("line", { x1: PC.x, y1: PC.y, x2: PB.x, y2: PB.y }),
+        /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: `${PA.x},${PA.y} ${PB.x},${PB.y} ${PC.x},${PC.y}`,
+            fill: "url(#gradient)"
+          }
+        ),
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: "gradient1",
+              x1: "0%",
+              y1: "0%",
+              x2: "100%",
+              y2: "100%",
+              opacity: 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: "0%",
+                    style: {
+                      stopColor: "rgb(252 165 165)",
+                      stopOpacity: 1
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: "100%",
+                    style: {
+                      stopColor: "rgb(147 197 253)",
+                      stopOpacity: 1
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: "gradient",
+              x1: "0%",
+              y1: "0%",
+              x2: "100%",
+              y2: "100%",
+              opacity: 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: "0%",
+                    style: {
+                      stopColor: "red",
+                      stopOpacity: 0.3
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: "100%",
+                    style: {
+                      stopColor: "blue",
+                      stopOpacity: 0.4
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("filter", { id: "blur", children: /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1" }) })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  SkillGraph as default
+};
+//# sourceMappingURL=skill-graph.js.map

package/dist/esm/components/components/skill-graph.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/components/skill-graph.tsx"],"sourcesContent":["/** @jsxImportSource react */\ninterface Point {\n  x: number\n  y: number\n}\n\nconst getPoint = (\n  center: Point,\n  edgePoint: Point,\n  edgeFactor: number,\n  pointFactor: number\n) => {\n  const factorY = (center.y - edgePoint.y) / edgeFactor\n  const factorX = (center.x - edgePoint.x) / edgeFactor\n  return {\n    x: center.x - pointFactor * factorX,\n    y: center.y - pointFactor * factorY,\n  }\n}\n\nexport default function SkillGraph({\n  factorA = 0.4,\n  factorB = 0.2,\n  factorC = 0.2,\n}: {\n  factorA?: number\n  factorB?: number\n  factorC?: number\n}) {\n  const base = 0.4\n  const sqrt3 = Math.sqrt(3)\n  const centerPoint = {\n    x: 60,\n    y: 80 / sqrt3 + 10,\n  }\n  const edgePointA = {\n    x: 20,\n    y: 40 / sqrt3 + 10,\n  }\n\n  const edgePointB = {\n    x: 100,\n    y: 40 / sqrt3 + 10,\n  }\n\n  const edgePointC = {\n    x: 60,\n    y: 160 / sqrt3 + 10,\n  }\n\n  const PA = getPoint(centerPoint, edgePointA, base, factorA)\n  const PB = getPoint(centerPoint, edgePointB, base, factorB)\n  const PC = getPoint(centerPoint, edgePointC, base, factorC)\n  // 50,78 90,10 10,10\n  return (\n    <>\n      <svg\n        height=\"145\"\n        viewBox={`0 0 125 125`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle\n          cx={centerPoint.x}\n          cy={centerPoint.y}\n          r={80 / sqrt3}\n          className=\"fill-gray-100/30\"\n          filter=\"url(#blur)\"\n        />\n        {/* <polygon points={`${edgePointA.x},${edgePointA.y} ${edgePointB.x},${edgePointB.y} ${edgePointC.x},${edgePointC.y}`}\n  className=\"fill-gray-300\"\n /> */}\n        <circle cx={PA.x} cy={PA.y} />\n        <text\n          x={edgePointA.x - 10}\n          y={edgePointA.y}\n          fill=\"url(#gradient1)\"\n          className=\"text-[8px] font-bold text-white\"\n        >\n          Acc\n        </text>\n        <text\n          x={edgePointA.x - 20}\n          y={edgePointA.y + 10}\n          fill=\"url(#gradient1)\"\n          className=\"text-[8px] font-bold text-white\"\n        >\n          {(factorA * 100).toFixed(2)}%\n        </text>\n        <text\n          x={edgePointB.x - 6}\n          y={edgePointB.y}\n          fill=\"url(#gradient1)\"\n          className=\"text-[8px] font-bold text-white\"\n        >\n          Tech\n        </text>\n        <text\n          x={edgePointB.x - 6}\n          y={edgePointB.y + 8}\n          fill=\"url(#gradient1)\"\n          className=\"text-[8px] font-bold text-white\"\n        >\n          {(factorB * 100).toFixed(2)}%\n        </text>\n        <text\n          x={edgePointC.x - 6}\n          y={edgePointC.y + 2}\n          fill=\"url(#gradient1)\"\n          className=\"text-[8px] font-bold text-white\"\n        >\n          Pass\n        </text>\n        <text\n          x={edgePointC.x - 8}\n          y={edgePointC.y + 12}\n          fill=\"url(#gradient1)\"\n          className=\"text-[8px] font-bold text-white\"\n        >\n          {(factorC * 100).toFixed(2)}%\n        </text>\n        {/* 数据点b */}\n        <circle cx={PB.x} cy={PB.y} />\n        {/* 数据点c */}\n        <circle cx={PC.x} cy={PC.y} />\n\n        <line x1={PA.x} y1={PA.y} x2={PC.x} y2={PC.y} />\n        <line x1={PA.x} y1={PA.y} x2={PB.x} y2={PB.y} />\n        <line x1={PC.x} y1={PC.y} x2={PB.x} y2={PB.y} />\n        <polygon\n          points={`${PA.x},${PA.y} ${PB.x},${PB.y} ${PC.x},${PC.y}`}\n          fill=\"url(#gradient)\"\n        />\n        <defs>\n          <linearGradient\n            id=\"gradient1\"\n            x1=\"0%\"\n            y1=\"0%\"\n            x2=\"100%\"\n            y2=\"100%\"\n            opacity={0}\n          >\n            <stop\n              offset=\"0%\"\n              style={{\n                stopColor: 'rgb(252 165 165)',\n                stopOpacity: 1,\n              }}\n            />\n            <stop\n              offset=\"100%\"\n              style={{\n                stopColor: 'rgb(147 197 253)',\n                stopOpacity: 1,\n              }}\n            />\n          </linearGradient>\n          <linearGradient\n            id=\"gradient\"\n            x1=\"0%\"\n            y1=\"0%\"\n            x2=\"100%\"\n            y2=\"100%\"\n            opacity={0}\n          >\n            <stop\n              offset=\"0%\"\n              style={{\n                stopColor: 'red',\n                stopOpacity: 0.3,\n              }}\n            />\n            <stop\n              offset=\"100%\"\n              style={{\n                stopColor: 'blue',\n                stopOpacity: 0.4,\n              }}\n            />\n          </linearGradient>\n          <filter id=\"blur\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"1\" />\n          </filter>\n        </defs>\n      </svg>\n    </>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/components/socre-badge.js

@@ -0,0 +1,26 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { twJoin } from "../utils/tw-join";
+function ScoreBadge({
+  name,
+  count,
+  className
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: twJoin(
+        "flex items-center self-center  rounded-md  w-18",
+        "bg-gradient-to-r bg-clip-text text-transparent from-blue-300 to-red-300",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "border-r-0.5 font-semibold m-auto text-center rounded-l-lg w-8", children: name }),
+        /* @__PURE__ */ jsx("span", { className: "bg-transparent m-auto text-ellipsis line-clamp-1", children: count })
+      ]
+    }
+  ) });
+}
+export {
+  ScoreBadge as default
+};
+//# sourceMappingURL=socre-badge.js.map

package/dist/esm/components/components/socre-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/components/socre-badge.tsx"],"sourcesContent":["/** @jsxImportSource react */\nimport { twJoin } from '../utils/tw-join'\n\nexport default function ScoreBadge({\n  name,\n  count,\n  className,\n}: {\n  name: string\n  count: string | number\n  className?: string\n}) {\n  return (\n    <>\n      <div\n        className={twJoin(\n          'flex items-center self-center  rounded-md  w-18',\n          'bg-gradient-to-r bg-clip-text text-transparent from-blue-300 to-red-300',\n          className\n        )}\n      >\n        <span className=\"border-r-0.5 font-semibold m-auto text-center rounded-l-lg w-8\">\n          {name}\n        </span>\n        <span className=\"bg-transparent m-auto text-ellipsis line-clamp-1\">\n          {count}\n        </span>\n      </div>\n    </>\n  )\n}\n"],"mappings":"AAaI,mBAQI,KAPF,YADF;AAZJ,SAAS,cAAc;AAER,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,gCACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAU,kEACb,gBACH;AAAA,QACA,oBAAC,UAAK,WAAU,oDACb,iBACH;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}