@contentmunch/contentmunch-ui 1.1.18 → 1.1.19

package/lib/assets/variables.css

@@ -36,6 +36,11 @@
     --orange: rgba(255, 127, 0, 1.0);
     --red: rgba(255, 0, 0, 1.0);
     --brown: var(--danger-color);
+    --light-color: #f0f0f0;
+    --snippet-highlight-color: #fff3b0;
+    --not-started-color: #64748b;
+    --completed-color: var(--success-color);
+    --in-progress-color: #3730a3;
 
     /* Sizes */
     --extra-small-size: 20rem;

package/lib/visualization/PieChart.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import "./assets/pie-chart.css";
+import type { PieChartData } from "./data/PieChartData";
+export declare const PieChart: React.FC<PieChartProps>;
+export interface PieChartProps {
+    data: PieChartData[];
+    withLegend?: boolean;
+    legendTitle?: string;
+    onClick?: (index: number) => void;
+    valueFormatter?: (num: number, index: number) => string;
+    colorRange?: string[];
+}

package/lib/visualization/StackedBarChart.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import "./assets/stacked-bar-chart.css";
+import type { StackedBarChartData } from "./data/StackedBarChartData";
+export declare const StackedBarChart: React.FC<BarChartProps>;
+export interface BarChartProps {
+    data: StackedBarChartData;
+    comparisonData?: StackedBarChartData;
+    toPercentage?: boolean;
+    colorRange?: string[];
+    withLegend?: boolean;
+    showOnlyValues?: boolean;
+}

package/lib/visualization/assets/pie-chart.css

@@ -0,0 +1,84 @@
+.muncher-pie-chart {
+    .svg-pie-chart-legend {
+        display: none;
+    }
+
+
+    .svg-pie-chart {
+        width: 12rem;
+        height: 12rem;
+
+        path {
+            cursor: pointer;
+            opacity: 1;
+            transition: fill ease-in-out .4s;
+        }
+
+        path:hover {
+            opacity: .9;
+        }
+
+        .selected {
+            opacity: .9;
+            stroke: var(--light-color);
+            stroke-width: .1rem;
+        }
+
+        .text {
+            font-size: .3rem;
+            font-weight: bold;
+            font-family: var(--sans-serif-font), sans-serif;
+        }
+
+        .value {
+            font-size: .2rem;
+        }
+
+        @media (max-width: 40rem) {
+            width: 15rem;
+            height: 15rem;
+            .text {
+                font-weight: lighter;
+            }
+        }
+    }
+
+    @media (max-width: 40rem) {
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+
+        .svg-pie-chart-legend {
+            display: block;
+            width: 10rem;
+            height: 15rem;
+
+            .legend-rect {
+                cursor: pointer;
+            }
+
+            .legend-rect--selected {
+                stroke: var(--light-color);
+                stroke-width: .05rem;
+
+            }
+
+            .legend-title {
+                font-size: .3rem;
+            }
+
+            .legend-text {
+                font-size: .25rem;
+                cursor: pointer;
+            }
+
+            .legend-text--selected {
+                text-decoration: underline;
+            }
+
+            .legend-rect:hover, .legend-text:hover {
+                opacity: .8;
+            }
+        }
+    }
+}

package/lib/visualization/assets/stacked-bar-chart.css

@@ -0,0 +1,50 @@
+.muncher-bar-chart {
+    .svg-bar-chart-legend {
+        display: none;
+    }
+
+    .svg-bar-chart {
+        width: 90vw;
+        @media (max-width: 40rem) {
+            width: 60vw;
+        }
+
+        .tick {
+            text {
+                color: #000;
+                font-family: var(--serif-font), serif;
+                font-size: .4rem;
+            }
+        }
+
+        .bar-rectangle:hover {
+            opacity: .8;
+        }
+
+        .bar-text {
+            font-family: var(--serif-font), serif;
+            color: white;
+            font-size: .3rem;
+            fill: #000;
+
+        }
+    }
+
+    @media (max-width: 40rem) {
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+        .svg-bar-chart-legend {
+            display: block;
+            width: 10vw;
+
+            text {
+                font-family: var(--serif-font), serif;
+                font-size: .16rem;
+                text-transform: capitalize;
+            }
+
+        }
+    }
+
+}

package/lib/visualization/data/PieChartData.d.ts

@@ -0,0 +1,6 @@
+export interface PieChartData {
+    title: string;
+    value: number;
+    legend?: string;
+    isSelected: boolean;
+}

package/lib/visualization/data/StackedBarChartData.d.ts

@@ -0,0 +1,10 @@
+export interface StackedBarChartData {
+    titleField: string;
+    totalField: string;
+    stackFields: string[];
+    values: FieldValue[];
+    titleSeparator?: string;
+}
+export interface FieldValue {
+    [id: string]: number | string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentmunch/contentmunch-ui",
-  "version": "1.1.18",
+  "version": "1.1.19",
   "description": "Contentmunch UI components",
   "author": "contentmunch",
   "license": "MIT",
@@ -59,10 +59,12 @@
     "@storybook/react": "^8.6.14",
     "@storybook/react-vite": "^8.6.14",
     "@storybook/test": "^8.6.14",
+    "@types/d3": "^7.4.3",
     "@types/node": "^22.15.21",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
+    "d3": "^7.9.0",
     "eslint": "^9.25.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",