Minor refactor (#12)

* minor refactor: locate colorScale with ColorScaleSetter, locate xScale with AxisTicksSetter * updated custom elements manifest * rebuild docs
clhenrick · Jan 21, 2022 · 971f2f1 · 971f2f1
1 parent d986840
commit 971f2f1
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 42 deletions.
diff --git a/custom-elements.json b/custom-elements.json
@@ -169,18 +169,8 @@
             {
               "kind": "field",
               "name": "colorScale",
-              "type": {
-                "text": "ColorScale"
-              },
               "description": "A type of d3-scale for applying color values to the legend item(s),\nset internally by the colorScaleSetter."
             },
-            {
-              "kind": "field",
-              "name": "renderer",
-              "privacy": "private",
-              "default": "new Renderer(this)",
-              "description": "Handles rendering of HTML/SVG markup from the scaleType"
-            },
             {
               "kind": "field",
               "name": "axisTickSetter",
@@ -191,10 +181,14 @@
             {
               "kind": "field",
               "name": "xScale",
-              "type": {
-                "text": "XScale"
-              },
               "description": "A d3 linear scale used for generating axis ticks,\nset internally by the axisTickSetter"
+            },
+            {
+              "kind": "field",
+              "name": "renderer",
+              "privacy": "private",
+              "default": "new Renderer(this)",
+              "description": "Handles rendering of HTML/SVG markup from the scaleType"
             }
           ],
           "attributes": [
@@ -387,6 +381,13 @@
               },
               "default": "cle"
             },
+            {
+              "kind": "field",
+              "name": "colorScale",
+              "type": {
+                "text": "ColorScale"
+              }
+            },
             {
               "kind": "method",
               "name": "setColorScale",
@@ -968,6 +969,13 @@
               },
               "default": "cle"
             },
+            {
+              "kind": "field",
+              "name": "xScale",
+              "type": {
+                "text": "XScale"
+              }
+            },
             {
               "kind": "method",
               "name": "setXScale",

diff --git a/docs/build/color-legend-element.umd.js b/docs/build/color-legend-element.umd.js
diff --git a/src/color-legend-element.ts b/src/color-legend-element.ts
@@ -6,14 +6,7 @@ import { Renderer } from "./renderer";
 import { AxisTicksSetter } from "./x-scale-axis";
 import { styles } from "./styles";
 
-import {
-  ColorScale,
-  XScale,
-  ScaleType,
-  Interpolator,
-  ChangedProps,
-  TickFormatter,
-} from "./types";
+import { ScaleType, Interpolator, ChangedProps, TickFormatter } from "./types";
 
 import {
   COLOR_SCALE_PROPS,
@@ -184,12 +177,9 @@ export class ColorLegendElement extends LitElement {
    * A type of d3-scale for applying color values to the legend item(s),
    * set internally by the colorScaleSetter.
    */
-  colorScale!: ColorScale;
-
-  /**
-   * Handles rendering of HTML/SVG markup from the scaleType
-   */
-  private renderer = new Renderer(this);
+  get colorScale() {
+    return this.colorScaleSetter.colorScale;
+  }
 
   /**
    * Configures the x scale and axis ticks
@@ -200,7 +190,14 @@ export class ColorLegendElement extends LitElement {
    * A d3 linear scale used for generating axis ticks,
    * set internally by the axisTickSetter
    */
-  xScale!: XScale;
+  get xScale() {
+    return this.axisTickSetter.xScale;
+  }
+
+  /**
+   * Handles rendering of HTML/SVG markup from the scaleType
+   */
+  private renderer = new Renderer(this);
 
   /**
    * Invoked on each update to perform rendering tasks. This method may return any

diff --git a/src/color-scale.ts b/src/color-scale.ts
@@ -7,13 +7,15 @@ import {
 } from "d3-scale";
 import { interpolateHcl } from "d3-interpolate";
 
-import { ScaleType } from "./types";
+import { ColorScale, ScaleType } from "./types";
 
 import { ColorLegendElement } from "./color-legend-element";
 
 export class ColorScaleSetter {
   cle: ColorLegendElement;
 
+  colorScale!: ColorScale;
+
   constructor(cle: ColorLegendElement) {
     this.cle = cle;
   }
@@ -45,7 +47,7 @@ export class ColorScaleSetter {
    */
   private setContinousColorScale() {
     const { interpolator, domain, range } = this.cle;
-    this.cle.colorScale = interpolator
+    this.colorScale = interpolator
       ? scaleSequential(interpolator).domain(domain as number[])
       : scaleLinear<string>()
           .range(range as string[])
@@ -57,7 +59,7 @@ export class ColorScaleSetter {
    * Sets the colorScale property to a ScaleQuantize
    */
   private setDiscreteColorScale() {
-    this.cle.colorScale = scaleQuantize<string>()
+    this.colorScale = scaleQuantize<string>()
       .domain(this.cle.domain as number[])
       .range(this.cle.range);
   }
@@ -67,7 +69,7 @@ export class ColorScaleSetter {
    */
   private setThresholdColorScale() {
     const domain = this.cle.domain as number[];
-    this.cle.colorScale = scaleThreshold<number, string>()
+    this.colorScale = scaleThreshold<number, string>()
       .domain(domain.slice(1, domain.length - 1))
       .range(this.cle.range as string[]);
   }
@@ -76,7 +78,7 @@ export class ColorScaleSetter {
    * Sets the colorScale to a ScaleOrdinal
    */
   private setCategoricalColorScale() {
-    this.cle.colorScale = scaleOrdinal<string, string>()
+    this.colorScale = scaleOrdinal<string, string>()
       .domain(this.cle.domain as string[])
       .range(this.cle.range as string[]);
   }

diff --git a/src/x-scale-axis.ts b/src/x-scale-axis.ts
@@ -1,12 +1,14 @@
 import { scaleLinear } from "d3-scale";
 import { format } from "d3-format";
 import { ColorLegendElement } from "./color-legend-element";
-import { ScaleType, ScaleQuantize } from "./types";
+import { ScaleType, ScaleQuantize, XScale } from "./types";
 import { DEFAULT_TICKS, DEFAULT_TICK_FORMAT } from "./constants";
 
 export class AxisTicksSetter {
   cle: ColorLegendElement;
 
+  xScale!: XScale;
+
   constructor(cle: ColorLegendElement) {
     this.cle = cle;
   }
@@ -18,13 +20,13 @@ export class AxisTicksSetter {
     const { scaleType, marginLeft, width, marginRight } = this.cle;
     switch (scaleType) {
       case ScaleType.Continuous:
-        this.cle.xScale = scaleLinear()
+        this.xScale = scaleLinear()
           .domain(this.cle.domain as number[])
           .range([marginLeft, width - marginRight]);
         break;
       case ScaleType.Discrete:
       case ScaleType.Threshold:
-        this.cle.xScale = scaleLinear<number, number>()
+        this.xScale = scaleLinear<number, number>()
           .domain([
             (this.cle.domain as number[]).at(0),
             (this.cle.domain as number[]).at(-1),
@@ -33,7 +35,7 @@ export class AxisTicksSetter {
         break;
       case ScaleType.Categorical:
         // xScale is not used for ScaleType.Categorical
-        this.cle.xScale = null;
+        this.xScale = null;
         break;
       default:
         throw new Error(`Unrecognized scaleType: ${scaleType}`);
@@ -50,7 +52,7 @@ export class AxisTicksSetter {
       scaleType !== ScaleType.Continuous &&
       scaleType !== ScaleType.Categorical
     ) {
-      const [min, max] = this.cle.xScale.domain() as [number, number];
+      const [min, max] = this.xScale.domain() as [number, number];
       this.cle.tickValues = this.cle.tickValues || [
         min,
         ...((this.cle.colorScale as ScaleQuantize<number>)?.thresholds?.() ||
@@ -61,7 +63,7 @@ export class AxisTicksSetter {
     if (this.cle.tickFormat?.length) {
       this.cle.tickFormatter = format(this.cle.tickFormat);
     } else {
-      this.cle.tickFormatter = this.cle.xScale.tickFormat(
+      this.cle.tickFormatter = this.xScale.tickFormat(
         this.cle.ticks || DEFAULT_TICKS,
         this.cle.tickFormat || DEFAULT_TICK_FORMAT
       );