first commit

2022-05-23 12:56:31 +03:00
commit 3cea343aaf
395 changed files with 37099 additions and 0 deletions
--- a/src/charts/PieChart.jsx
+++ b/src/charts/PieChart.jsx
@@ -0,0 +1,117 @@
+import React, { useRef, useEffect } from 'react';
+
+import {
+  Chart, PieController, ArcElement, TimeScale, Tooltip,
+} from 'chart.js';
+import 'chartjs-adapter-moment';
+
+// Import utilities
+import { tailwindConfig } from '../utils/Utils';
+
+Chart.register(PieController, ArcElement, TimeScale, Tooltip);
+
+function PieChart({
+  data,
+  width,
+  height
+}) {
+
+  const canvas = useRef(null);
+  const legend = useRef(null);
+
+  useEffect(() => {
+    const ctx = canvas.current;
+    // eslint-disable-next-line no-unused-vars
+    const chart = new Chart(ctx, {
+      type: 'pie',
+      data: data,
+      options: {
+        layout: {
+          padding: {
+            top: 4,
+            bottom: 4,
+            left: 24,
+            right: 24,
+          },
+        },
+        plugins: {
+          legend: {
+            display: false,
+          },
+        },
+        interaction: {
+          intersect: false,
+          mode: 'nearest',
+        },
+        animation: {
+          duration: 200,
+        },
+        maintainAspectRatio: false,
+      },
+      plugins: [
+        {
+          id: 'htmlLegend',
+          afterUpdate(c, args, options) {
+            const ul = legend.current;
+            if (!ul) return;
+            // Remove old legend items
+            while (ul.firstChild) {
+              ul.firstChild.remove();
+            }
+            // Reuse the built-in legendItems generator
+            const items = c.options.plugins.legend.labels.generateLabels(c);
+            items.forEach((item) => {
+              const li = document.createElement('li');
+              li.style.margin = tailwindConfig().theme.margin[1.5];
+              // Button element
+              const button = document.createElement('button');
+              button.style.display = 'inline-flex';
+              button.style.alignItems = 'center';
+              button.style.opacity = item.hidden ? '.3' : '';
+              button.onclick = () => {
+                c.toggleDataVisibility(item.index, !item.index);
+                c.update();
+              };
+              // Color box
+              const box = document.createElement('span');
+              box.style.display = 'block';
+              box.style.width = tailwindConfig().theme.width[3];
+              box.style.height = tailwindConfig().theme.height[3];
+              box.style.borderRadius = tailwindConfig().theme.borderRadius.full;
+              box.style.marginRight = tailwindConfig().theme.margin[1.5];
+              box.style.borderWidth = '3px';
+              box.style.borderColor = item.fillStyle;
+              box.style.pointerEvents = 'none';
+              // Label
+              const label = document.createElement('span');
+              label.style.color = tailwindConfig().theme.colors.slate[500];
+              label.style.fontSize = tailwindConfig().theme.fontSize.sm[0];
+              label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight;
+              const labelText = document.createTextNode(item.text);
+              label.appendChild(labelText);
+              li.appendChild(button);
+              button.appendChild(box);
+              button.appendChild(label);
+              ul.appendChild(li);
+            });
+          },
+        },
+      ],
+    });
+    return () => chart.destroy();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="grow flex flex-col justify-center">
+      <div>
+        <canvas ref={canvas} width={width} height={height}></canvas>
+      </div>
+      <div className="px-5 py-4">
+        <ul ref={legend} className="flex flex-wrap justify-center -m-1" />
+      </div>
+    </div>
+  );
+}
+
+export default PieChart;