@mwater/visualization 5.3.0 → 5.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "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]}