Mintplex-Labs · timothycarambat · Apr 26, 2024 · Apr 4, 2024 · Apr 4, 2024 · Apr 8, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,7 +5,10 @@
     "aibitat",
     "anythingllm",
     "Astra",
+    "Chartable",
     "comkey",
+    "cooldown",
+    "cooldowns",
     "Deduplicator",
     "Dockerized",
     "Embeddable",

diff --git a/frontend/package.json b/frontend/package.json
@@ -14,6 +14,7 @@
     "@metamask/jazzicon": "^2.0.0",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@phosphor-icons/react": "^2.0.13",
+    "@tremor/react": "^3.15.1",
     "dompurify": "^3.0.8",
     "file-saver": "^2.0.5",
     "he": "^1.2.0",
@@ -30,6 +31,8 @@
     "react-tag-input-component": "^2.0.2",
     "react-toastify": "^9.1.3",
     "react-tooltip": "^5.25.2",
+    "recharts": "^2.12.5",
+    "recharts-to-png": "^2.3.1",
     "text-case": "^1.0.9",
     "truncate": "^3.0.0",
     "uuid": "^9.0.0"

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomCell.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomCell.jsx
@@ -0,0 +1,50 @@
+export default function CustomCell({ ...props }) {
+  const {
+    root,
+    depth,
+    x,
+    y,
+    width,
+    height,
+    index,
+    payload,
+    colors,
+    rank,
+    name,
+  } = props;
+  return (
+    <g>
+      <rect
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        style={{
+          fill:
+            depth < 2
+              ? colors[Math.floor((index / root.children.length) * 6)]
+              : "#ffffff00",
+          stroke: "#fff",
+          strokeWidth: 2 / (depth + 1e-10),
+          strokeOpacity: 1 / (depth + 1e-10),
+        }}
+      />
+      {depth === 1 ? (
+        <text
+          x={x + width / 2}
+          y={y + height / 2 + 7}
+          textAnchor="middle"
+          fill="#fff"
+          fontSize={14}
+        >
+          {name}
+        </text>
+      ) : null}
+      {depth === 1 ? (
+        <text x={x + 4} y={y + 18} fill="#fff" fontSize={16} fillOpacity={0.9}>
+          {index + 1}
+        </text>
+      ) : null}
+    </g>
+  );
+}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomTooltip.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomTooltip.jsx
@@ -0,0 +1,89 @@
+import { Tooltip as RechartsTooltip } from "recharts";
+
+// Given a hex, convert to the opposite highest-contrast color
+// and if `bw` is enabled, force it to be black/white to normalize
+// interface.
+function invertColor(hex, bw) {
+  if (hex.indexOf("#") === 0) {
+    hex = hex.slice(1);
+  }
+  // convert 3-digit hex to 6-digits.
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  if (hex.length !== 6) {
+    throw new Error("Invalid HEX color.");
+  }
+  var r = parseInt(hex.slice(0, 2), 16),
+    g = parseInt(hex.slice(2, 4), 16),
+    b = parseInt(hex.slice(4, 6), 16);
+  if (bw) {
+    // https://stackoverflow.com/a/3943023/112731
+    return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? "#FFFFFF" : "#000000";
+    // : '#FFFFFF';
+  }
+  // invert color components
+  r = (255 - r).toString(16);
+  g = (255 - g).toString(16);
+  b = (255 - b).toString(16);
+  // pad each with zeros and return
+  return "#" + padZero(r) + padZero(g) + padZero(b);
+}
+
+function padZero(str, len) {
+  len = len || 2;
+  var zeros = new Array(len).join("0");
+  return (zeros + str).slice(-len);
+}
+
+export default function Tooltip({ legendColor, ...props }) {
+  return (
+    <RechartsTooltip
+      wrapperStyle={{ outline: "none" }}
+      isAnimationActive={false}
+      cursor={{ fill: "#d1d5db", opacity: "0.15" }}
+      position={{ y: 0 }}
+      {...props}
+      content={({ active, payload, label }) => {
+        return active && payload ? (
+          <div className="bg-white text-sm rounded-md border shadow-lg">
+            <div className="border-b py-2 px-4">
+              <p className="text-elem text-gray-700 font-medium">{label}</p>
+            </div>
+            <div className="space-y-1 py-2 px-4">
+              {payload.map(({ value, name }, idx) => (
+                <div
+                  key={`id-${idx}`}
+                  className="flex items-center justify-between space-x-8"
+                >
+                  <div className="flex items-center space-x-2">
+                    <span
+                      className="shrink-0 h-3 w-3 border-white rounded-md rounded-full border-2 shadow-md"
+                      style={{ backgroundColor: legendColor }}
+                    />
+                    <p
+                      style={{
+                        color: invertColor(legendColor, true),
+                      }}
+                      className="font-medium tabular-nums text-right whitespace-nowrap"
+                    >
+                      {value}
+                    </p>
+                  </div>
+                  <p
+                    style={{
+                      color: invertColor(legendColor, true),
+                    }}
+                    className="whitespace-nowrap font-normal"
+                  >
+                    {name}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : null;
+      }}
+    />
+  );
+}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/chart-utils.js b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/chart-utils.js
@@ -0,0 +1,98 @@
+export const Colors = {
+  blue: "#3b82f6",
+  sky: "#0ea5e9",
+  cyan: "#06b6d4",
+  teal: "#14b8a6",
+  emerald: "#10b981",
+  green: "#22c55e",
+  lime: "#84cc16",
+  yellow: "#eab308",
+  amber: "#f59e0b",
+  orange: "#f97316",
+  red: "#ef4444",
+  rose: "#f43f5e",
+  pink: "#ec4899",
+  fuchsia: "#d946ef",
+  purple: "#a855f7",
+  violet: "#8b5cf6",
+  indigo: "#6366f1",
+  neutral: "#737373",
+  stone: "#78716c",
+  gray: "#6b7280",
+  slate: "#64748b",
+  zinc: "#71717a",
+};
+
+export function getTremorColor(color) {
+  switch (color) {
+    case "blue":
+      return Colors.blue;
+    case "sky":
+      return Colors.sky;
+    case "cyan":
+      return Colors.cyan;
+    case "teal":
+      return Colors.teal;
+    case "emerald":
+      return Colors.emerald;
+    case "green":
+      return Colors.green;
+    case "lime":
+      return Colors.lime;
+    case "yellow":
+      return Colors.yellow;
+    case "amber":
+      return Colors.amber;
+    case "orange":
+      return Colors.orange;
+    case "red":
+      return Colors.red;
+    case "rose":
+      return Colors.rose;
+    case "pink":
+      return Colors.pink;
+    case "fuchsia":
+      return Colors.fuchsia;
+    case "purple":
+      return Colors.purple;
+    case "violet":
+      return Colors.violet;
+    case "indigo":
+      return Colors.indigo;
+    case "neutral":
+      return Colors.neutral;
+    case "stone":
+      return Colors.stone;
+    case "gray":
+      return Colors.gray;
+    case "slate":
+      return Colors.slate;
+    case "zinc":
+      return Colors.zinc;
+  }
+}
+
+export const themeColorRange = [
+  "slate",
+  "gray",
+  "zinc",
+  "neutral",
+  "stone",
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose",
+];