@mwater/visualization 5.3.0 → 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.0",
+  "version": "5.3.2",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {

package/src/CustomColorsContext.tsx

@@ -1,5 +1,6 @@
 import { createContext } from "react"
 
+/** Palettes are groups of 6 colors. Pad with nulls if fewer than 6 colors are provided. */
 export interface CustomColorsContextType {
   customColors: (string | null)[]
 }

package/src/axes/ColorPaletteCollectionComponent.tsx

@@ -92,11 +92,10 @@ function ColorPaletteCollectionComponent(props: ColorPaletteCollectionComponentP
   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: Palette[] = []
-    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) as string[] })
     }
     palettes.unshift(...customPalettes)
   }
@@ -174,12 +173,13 @@ class ColorPaletteComponent extends React.Component<ColorPaletteComponentProps>
   render() {
     return (
       <div onClick={this.handleSelect} className="axis-palette">
-        {_.map(this.props.colorSet, (color, i) => {
+        {_.range(Math.max(6, this.props.colorSet.length)).map((i) => {
+          const color = this.props.colorSet[i]
           const cellStyle: React.CSSProperties = {
             display: "inline-block",
             height: 20,
             width: 20,
-            backgroundColor: color
+            backgroundColor: color ?? "transparent"
           }
           return <div style={cellStyle} key={i}> </div>
         })}

package/src/dashboards/LayoutOptionsComponent.tsx

@@ -344,7 +344,8 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
         </FormGroup>
         <FormGroup label="Custom Colors">
           <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '5px' }}>
-            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((colorIndex) => (
+            {/* 18 colors, 3 rows of 6 */}
+            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17].map((colorIndex) => (
               <ColorComponent
                 key={colorIndex}
                 color={layoutOptions.customColors[colorIndex]}