@mwater/visualization 5.3.1 → 5.3.2

package/lib/CustomColorsContext.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/** Palettes are groups of 6 colors. Pad with nulls if fewer than 6 colors are provided. */
 export interface CustomColorsContextType {
     customColors: (string | null)[];
 }

package/lib/axes/ColorPaletteCollectionComponent.js

@@ -100,11 +100,10 @@ function ColorPaletteCollectionComponent(props) {
     // Number of colors needed. Null doesn't count to length
     const numColors = props.categories.filter((c) => c.value != null).length;
     if (customColorsContext && customColorsContext.customColors.filter((c) => c != null).length > 0) {
-        const filteredCustomColors = customColorsContext.customColors.filter((c) => c != null);
         const customPalettes = [];
-        for (let i = 0; i < filteredCustomColors.length; i += 6) {
-            const customPalette = filteredCustomColors.slice(i, i + 6);
-            customPalettes.push({ type: "custom", reversed: false, colors: customPalette });
+        for (let i = 0; i < customColorsContext.customColors.length; i += 6) {
+            const customPalette = customColorsContext.customColors.slice(i, i + 6);
+            customPalettes.push({ type: "custom", reversed: false, colors: customPalette.filter((c) => c != null) });
         }
         palettes.unshift(...customPalettes);
     }
@@ -148,12 +147,13 @@ class ColorPaletteComponent extends react_1.default.Component {
         return this.props.onPaletteSelected(this.props.index);
     };
     render() {
-        return (react_1.default.createElement("div", { onClick: this.handleSelect, className: "axis-palette" }, lodash_1.default.map(this.props.colorSet, (color, i) => {
+        return (react_1.default.createElement("div", { onClick: this.handleSelect, className: "axis-palette" }, lodash_1.default.range(Math.max(6, this.props.colorSet.length)).map((i) => {
+            const color = this.props.colorSet[i];
             const cellStyle = {
                 display: "inline-block",
                 height: 20,
                 width: 20,
-                backgroundColor: color
+                backgroundColor: color ?? "transparent"
             };
             return react_1.default.createElement("div", { style: cellStyle, key: i }, " ");
         })));

package/lib/dashboards/LayoutOptionsComponent.js

@@ -203,7 +203,7 @@ function CustomizeLayout(props) {
                         onLayoutOptionsChange({ ...layoutOptions, blockBackgroundColor: blockBackgroundColor ?? "white" });
                     } })),
             react_1.default.createElement(bootstrap_1.FormGroup, { label: "Custom Colors" },
-                react_1.default.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '5px' } }, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((colorIndex) => (react_1.default.createElement(ColorComponent_1.default, { key: colorIndex, color: layoutOptions.customColors[colorIndex], onChange: (color) => {
+                react_1.default.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '5px' } }, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17].map((colorIndex) => (react_1.default.createElement(ColorComponent_1.default, { key: colorIndex, color: layoutOptions.customColors[colorIndex], onChange: (color) => {
                         onLayoutOptionsChange((0, immer_1.default)(layoutOptions, (draft) => {
                             draft.customColors[colorIndex] = color;
                         }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {