@servicetitan/anvil2-ext-charts 0.1.3 → 0.1.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @servicetitan/anvil2-ext-common
 
+## 0.1.5
+
+### Patch Changes
+
+- [#2060](https://github.com/servicetitan/hammer/pull/2060) [`8e4cea6`](https://github.com/servicetitan/hammer/commit/8e4cea6a5fdc178edae27518450f1204464831eb) Thanks [@rgdelato](https://github.com/rgdelato)! - [Illustrations] Add new `@servicetitan/anvil2-illustrations` package
+
+## 0.1.4
+
+### Patch Changes
+
+- [#1909](https://github.com/servicetitan/hammer/pull/1909) [`8547db6`](https://github.com/servicetitan/hammer/commit/8547db6b951d84f2f3dc677d2e46b61ec78ab5e1) Thanks [@rgdelato](https://github.com/rgdelato)! - Bump `peerDependencies` versions of React to `^18 || ^19`
+
 ## 0.1.3
 
 ### Patch Changes

package/dist/{ThemeSemantic-CNjZwPLr.js → ThemeSemantic-CaFj4ckO.js}

@@ -13153,7 +13153,8 @@ if (once) {
 const createTheme = ({
   fills: fillValues,
   strokes: strokeValues,
-  fillPatterns: fillPatternTypes
+  fillPatterns: fillPatternTypes,
+  colorOrder
 }) => {
   class ThemeCustom extends am5.Theme {
     constructor(root, isReal) {
@@ -13178,8 +13179,20 @@ const createTheme = ({
         // this mutates the array if we don't clone it o.o
         reuse: true
       });
+      const tempEl = document.createElement("div");
+      tempEl.style.color = "var(--foreground-color, #141414)";
+      this._root.dom.appendChild(tempEl);
+      const computedColor = getComputedStyle(tempEl).color;
+      tempEl.remove();
+      const rgbMatch = computedColor.match(/\d+/g);
+      const foregroundColor = rgbMatch && rgbMatch.length >= 3 ? "#" + rgbMatch.slice(0, 3).map((n) => parseInt(n).toString(16).padStart(2, "0")).join("") : "#141414";
       this.rule("Label").setAll({
-        fontFamily: "Nunito Sans"
+        fontFamily: "Nunito Sans",
+        fill: am5.color(foregroundColor)
+      });
+      this.rule("Grid").setAll({
+        stroke: am5.color(foregroundColor),
+        strokeOpacity: 0.15
       });
       this.rule("Legend").setAll({
         clickTarget: "none"
@@ -13205,6 +13218,7 @@ const createTheme = ({
         target.ticks.template.set("visible", false);
       };
       this.rule("RadialLabel", ["pie", "series"]).setup = (target) => {
+        target.set("fill", am5.color("#141414"));
         target.set("fontWeight", "600");
         target.set("baseRadius", am5.percent(65));
         target.set("x", am5.p50);
@@ -13249,7 +13263,56 @@ const createTheme = ({
           }
         });
       });
+      if (colorOrder) {
+        const getReorderedColorIndex = (idx) => colorOrder[idx % colorOrder.length];
+        const getSliceReorderIndex = (target) => {
+          const series = target.dataItem?.component;
+          if (!series || series.dataItems.length < 4) return void 0;
+          const idx = series.dataItems.indexOf(target.dataItem);
+          return idx >= 0 ? getReorderedColorIndex(idx) : void 0;
+        };
+        this.rule("Slice").adapters.add("fill", (fill, target) => {
+          const ci = getSliceReorderIndex(target);
+          return ci != null ? fills[ci] : fill;
+        });
+        this.rule("Slice").adapters.add("stroke", (stroke, target) => {
+          const ci = getSliceReorderIndex(target);
+          return ci != null ? strokes[ci] ?? fills[ci] : stroke;
+        });
+        this.rule("Slice").adapters.add("fillPattern", (pattern, target) => {
+          const ci = getSliceReorderIndex(target);
+          return ci != null ? fillPatterns[ci] : pattern;
+        });
+        const getSeriesReorderIndex = (target) => {
+          const chart = target.chart;
+          if (!chart) return void 0;
+          const allColumnSeries = chart.series.values.filter(
+            (s) => s instanceof ColumnSeries
+          );
+          if (allColumnSeries.length < 4) return void 0;
+          const idx = allColumnSeries.indexOf(target);
+          return idx >= 0 ? getReorderedColorIndex(idx) : void 0;
+        };
+        this.rule("ColumnSeries").adapters.add("fill", (fill, target) => {
+          const ci = getSeriesReorderIndex(target);
+          return ci != null ? fills[ci] : fill;
+        });
+        this.rule("ColumnSeries").adapters.add("stroke", (stroke, target) => {
+          const ci = getSeriesReorderIndex(target);
+          return ci != null ? strokes[ci] ?? fills[ci] : stroke;
+        });
+        this.rule("ColumnSeries").adapters.add(
+          "fillPattern",
+          (pattern, target) => {
+            const ci = getSeriesReorderIndex(target);
+            return ci != null ? fillPatterns[ci] : pattern;
+          }
+        );
+      }
       this.rule("AxisRendererX").setup = (target) => {
+        target.setAll({
+          stroke: am5.color(foregroundColor)
+        });
         target.labels.template.setAll({
           centerY: am5.p100,
           centerX: am5.p50,
@@ -13258,6 +13321,9 @@ const createTheme = ({
         });
       };
       this.rule("AxisRendererY").setup = (target) => {
+        target.setAll({
+          stroke: am5.color(foregroundColor)
+        });
         target.labels.template.setAll({
           centerY: am5.p50,
           centerX: am5.p100,
@@ -13328,6 +13394,40 @@ const createTheme = ({
           fontWeight: "600"
         });
         target.set("tooltip", customTooltip);
+        target.columns.template.events.on(
+          "pointerover",
+          ({ target: column }) => {
+            const series = column.dataItem?.component;
+            const chart = series?.chart;
+            if (!chart) return;
+            chart.series.each((s) => {
+              if (s instanceof ColumnSeries) {
+                s.columns.each((col) => {
+                  if (col !== column) {
+                    col.set("opacity", 0.2);
+                  }
+                });
+              }
+            });
+          }
+        );
+        target.columns.template.events.on(
+          "pointerout",
+          ({ target: column }) => {
+            const series = column.dataItem?.component;
+            const chart = series?.chart;
+            if (!chart) return;
+            chart.series.each((s) => {
+              if (s instanceof ColumnSeries) {
+                s.columns.each((col) => {
+                  if (col !== column) {
+                    col.set("opacity", 1);
+                  }
+                });
+              }
+            });
+          }
+        );
         j += 1;
         if (j == fills.length) j = 0;
       };
@@ -13345,7 +13445,8 @@ const patterns$2 = allMonochromeChartTokens.filter((key) => key.indexOf("Pattern
 const ThemeMonochrome = createTheme({
   fills: colors$2,
   strokes: strokes$2,
-  fillPatterns: patterns$2
+  fillPatterns: patterns$2,
+  colorOrder: [3, 0, 1, 2]
 });
 
 const allCategoricalChartTokens = Object.keys(core.semantic).filter(
@@ -13394,4 +13495,4 @@ const ThemeSemantic = createTheme({
 });
 
 export { ThemeMonochrome as T, ThemeCategorical as a, ThemeSemantic as b };
-//# sourceMappingURL=ThemeSemantic-CNjZwPLr.js.map
+//# sourceMappingURL=ThemeSemantic-CaFj4ckO.js.map