From 6fe8314e74ca6fad1225b5388fe959d7d492a3ec Mon Sep 17 00:00:00 2001 From: Chris Henrick <161748+clhenrick@users.noreply.github.com> Date: Thu, 14 Mar 2024 18:59:12 -0700 Subject: [PATCH] remove constant for default tick values (#49) * removed constant for default tick values * updated custom-elements.json * rebuilt docs dir * fixed x-scale-axis tests --- custom-elements.json | 83 +++++-------------------- docs/assets/color-legend-element.umd.js | 2 +- src/color-legend-element.ts | 3 +- src/constants.ts | 1 - src/test/x-scale-axis_test.ts | 4 +- 5 files changed, 19 insertions(+), 74 deletions(-) diff --git a/custom-elements.json b/custom-elements.json index e14a10b..7fd59dd 100644 --- a/custom-elements.json +++ b/custom-elements.json @@ -121,7 +121,6 @@ "type": { "text": "number[]" }, - "default": "DEFAULT_TICK_VALUES", "description": "The explicit values to be used for axis ticks", "attribute": "tickValues" }, @@ -169,7 +168,8 @@ { "kind": "field", "name": "colorScale", - "description": "A type of d3-scale for applying color values to the legend item(s),\nset internally by the colorScaleSetter." + "description": "A type of d3-scale for applying color values to the legend item(s),\nset internally by the colorScaleSetter.", + "readonly": true }, { "kind": "field", @@ -181,7 +181,8 @@ { "kind": "field", "name": "xScale", - "description": "A d3 linear scale used for generating axis ticks,\nset internally by the axisTickSetter" + "description": "A d3 linear scale used for generating axis ticks,\nset internally by the axisTickSetter", + "readonly": true }, { "kind": "field", @@ -196,63 +197,42 @@ "name": "titleText", "default": "DEFAULT_TITLE_TEXT", "description": "The title text that displays at the top of the legend", - "resolveInitializer": { - "module": "/src/constants" - }, "fieldName": "titleText" }, { "name": "width", "default": "DEFAULT_WIDTH", "description": "The width of the SVG or categorical legend div element", - "resolveInitializer": { - "module": "/src/constants" - }, "fieldName": "width" }, { "name": "height", "default": "DEFAULT_HEIGHT", "description": "The height of the SVG element", - "resolveInitializer": { - "module": "/src/constants" - }, "fieldName": "height" }, { "name": "marginTop", "default": "DEFAULT_MARGIN_TOP", "description": "The spacing between the legend bar and top most extent of the SVG", - "resolveInitializer": { - "module": "/src/constants" - }, "fieldName": "marginTop" }, { "name": "marginRight", "default": "DEFAULT_MARGIN_RIGHT", "description": "The spacing between the legend bar and right most extent of the SVG", - "resolveInitializer": { - "module": "/src/constants" - }, "fieldName": "marginRight" }, { "name": "marginBottom", "default": "DEFAULT_MARGIN_BOTTOM", "description": "The spacing between the legend bar and bottom most extent of the SVG", - "resolveInitializer": { - "module": "/src/constants" - }, "fieldName": "marginBottom" }, { "name": "marginLeft", "default": "DEFAULT_MARGIN_LEFT", "description": "The spacing between the legend bar and left most extent of the SVG", - "resolveInitializer": { - "module": "/src/constants" - }, "fieldName": "marginLeft" }, { @@ -262,9 +242,6 @@ }, "default": "DEFAULT_SCALE_TYPE", "description": "The type of legend to render based on d3-scale", - "resolveInitializer": { - "module": "/src/constants" - }, "fieldName": "scaleType" }, { @@ -274,54 +251,36 @@ }, "default": "DEFAULT_DOMAIN", "description": "The color scale's domain values", - "resolveInitializer": { - "module": "/src/constants" - }, "fieldName": "domain" }, { "name": "range", "default": "DEFAULT_RANGE", "description": "The color scale's range values", - "resolveInitializer": { - "module": "/src/constants" - }, "fieldName": "range" }, { "name": "markType", "default": "DEFAULT_MARK_TYPE", "description": "The symbology used for categorical legends", - "resolveInitializer": { - "module": "/src/constants" - }, "fieldName": "markType" }, { "name": "ticks", "default": "DEFAULT_TICKS", "description": "The desired number of axis ticks", - "resolveInitializer": { - "module": "/src/constants" - }, "fieldName": "ticks" }, { "name": "tickFormat", "default": "DEFAULT_TICK_FORMAT", "description": "The d3-format specifier to format axis tick values", - "resolveInitializer": { - "module": "/src/constants" - }, "fieldName": "tickFormat" }, { "name": "tickSize", "default": "DEFAULT_TICK_SIZE", "description": "The size or length of the axis ticks", - "resolveInitializer": { - "module": "/src/constants" - }, "fieldName": "tickSize" }, { @@ -329,11 +288,7 @@ "type": { "text": "number[]" }, - "default": "DEFAULT_TICK_VALUES", "description": "The explicit values to be used for axis ticks", - "resolveInitializer": { - "module": "/src/constants" - }, "fieldName": "tickValues" } ], @@ -514,14 +469,6 @@ }, "default": "6" }, - { - "kind": "variable", - "name": "DEFAULT_TICK_VALUES", - "type": { - "text": "number[]" - }, - "default": "null" - }, { "kind": "variable", "name": "DEFAULT_TICK_FORMAT", @@ -556,11 +503,19 @@ }, { "kind": "variable", - "name": "DEFAULT_MARK_TYPE" + "name": "DEFAULT_MARK_TYPE", + "type": { + "text": "MarkType" + }, + "default": "\"circle\"" }, { "kind": "variable", - "name": "DEFAULT_SCALE_TYPE" + "name": "DEFAULT_SCALE_TYPE", + "type": { + "text": "ScaleType" + }, + "default": "\"continuous\"" }, { "kind": "variable", @@ -576,7 +531,7 @@ "type": { "text": "array" }, - "default": "[\n \"scaleType\",\n \"ticks\",\n \"tickSize\",\n \"tickValues\",\n \"tickFormat\",\n \"domain\",\n \"range\",\n \"marginLeft\",\n \"marginRight\",\n \"marginBottom\",\n \"marginTop\",\n \"width\",\n \"height\",\n]" + "default": "[\n \"scaleType\",\n \"ticks\",\n \"tickSize\",\n \"tickValues\",\n \"tickFormat\",\n \"tickFormatter\",\n \"domain\",\n \"range\",\n \"marginLeft\",\n \"marginRight\",\n \"marginBottom\",\n \"marginTop\",\n \"width\",\n \"height\",\n]" } ], "exports": [ @@ -644,14 +599,6 @@ "module": "src/constants.ts" } }, - { - "kind": "js", - "name": "DEFAULT_TICK_VALUES", - "declaration": { - "name": "DEFAULT_TICK_VALUES", - "module": "src/constants.ts" - } - }, { "kind": "js", "name": "DEFAULT_TICK_FORMAT", diff --git a/docs/assets/color-legend-element.umd.js b/docs/assets/color-legend-element.umd.js index edb0cd9..86aa48f 100644 --- a/docs/assets/color-legend-element.umd.js +++ b/docs/assets/color-legend-element.umd.js @@ -187,4 +187,4 @@ const dt={attribute:!0,type:String,converter:$,reflect:!1,hasChanged:S},ut=(t=dt .legend-item.circle::before { border-radius: 50%; } -`;var Tt=function(t,i,e,s){for(var r,o=arguments.length,n=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,h=t.length-1;h>=0;h--)(r=t[h])&&(n=(o<3?r(n):o>3?r(i,e,n):r(i,e))||n);return o>3&&n&&Object.defineProperty(i,e,n),n};t.ColorLegendElement=class extends lt{constructor(){super(...arguments),this.titleText="Color Legend Element",this.width=325,this.height=32,this.marginTop=6,this.marginRight=12,this.marginBottom=16,this.marginLeft=12,this.scaleType="continuous",this.domain=wt,this.range=$t,this.markType="circle",this.ticks=5,this.tickFormat=".1f",this.tickSize=6,this.tickValues=null,this.colorScaleSetter=new pt(this),this.axisTickSetter=new xt(this),this.renderer=new bt(this)}get interpolator(){return this._interpolator}set interpolator(t){if("function"!=typeof t)throw new Error("interpolator must be a function.");{const i=this.interpolator;this._interpolator=t,this.requestUpdate("interpolator",i)}}get tickFormatter(){return this._tickFormatter}set tickFormatter(t){if("function"!=typeof t)throw new Error("tickFormatter must be a function.");{const i=this.tickFormatter;this._tickFormatter=t,this.requestUpdate("tickFormatter",i)}}get colorScale(){return this.colorScaleSetter.colorScale}get xScale(){return this.axisTickSetter.xScale}render(){return this.renderer.render()}willUpdate(t){St.some((i=>t.has(i)))&&this.colorScaleSetter.setColorScale(),kt.some((i=>t.has(i)))&&(this.axisTickSetter.setXScale(),this.axisTickSetter.handleAxisTicks())}},t.ColorLegendElement.styles=[Ct],Tt([ft({type:String})],t.ColorLegendElement.prototype,"titleText",void 0),Tt([ft({type:Number})],t.ColorLegendElement.prototype,"width",void 0),Tt([ft({type:Number})],t.ColorLegendElement.prototype,"height",void 0),Tt([ft({type:Number})],t.ColorLegendElement.prototype,"marginTop",void 0),Tt([ft({type:Number})],t.ColorLegendElement.prototype,"marginRight",void 0),Tt([ft({type:Number})],t.ColorLegendElement.prototype,"marginBottom",void 0),Tt([ft({type:Number})],t.ColorLegendElement.prototype,"marginLeft",void 0),Tt([ft({type:String})],t.ColorLegendElement.prototype,"scaleType",void 0),Tt([ft({type:Array})],t.ColorLegendElement.prototype,"domain",void 0),Tt([ft({type:Array})],t.ColorLegendElement.prototype,"range",void 0),Tt([ft({type:String})],t.ColorLegendElement.prototype,"markType",void 0),Tt([ft({type:Number})],t.ColorLegendElement.prototype,"ticks",void 0),Tt([ft({type:String})],t.ColorLegendElement.prototype,"tickFormat",void 0),Tt([ft({type:Number})],t.ColorLegendElement.prototype,"tickSize",void 0),Tt([ft({type:Array})],t.ColorLegendElement.prototype,"tickValues",void 0),Tt([function(t,i){return(e,s,r)=>{const o=i=>i.renderRoot?.querySelector(t)??null;if(i){const{get:t,set:i}="object"==typeof s?e:r??(()=>{const t=Symbol();return{get(){return this[t]},set(i){this[t]=i}}})();return gt(0,0,{get(){let e=t.call(this);return void 0===e&&(e=o(this),(null!==e||this.hasUpdated)&&i.call(this,e)),e}})}return gt(0,0,{get(){return o(this)}})}}("svg")],t.ColorLegendElement.prototype,"svg",void 0),Tt([ft({attribute:!1})],t.ColorLegendElement.prototype,"interpolator",null),Tt([ft({attribute:!1})],t.ColorLegendElement.prototype,"tickFormatter",null),t.ColorLegendElement=Tt([(t=>(i,e)=>{void 0!==e?e.addInitializer((()=>{customElements.define(t,i)})):customElements.define(t,i)})("color-legend")],t.ColorLegendElement),Object.defineProperty(t,"i",{value:!0})},"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("d3-scale"),require("d3-interpolate"),require("d3-format")):"function"==typeof define&&define.amd?define(["exports","d3-scale","d3-interpolate","d3-format"],i):i((t="undefined"!=typeof globalThis?globalThis:t||self)["color-legend-element"]={},t.d3,t.d3,t.d3); +`;var Tt=function(t,i,e,s){for(var r,o=arguments.length,n=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,h=t.length-1;h>=0;h--)(r=t[h])&&(n=(o<3?r(n):o>3?r(i,e,n):r(i,e))||n);return o>3&&n&&Object.defineProperty(i,e,n),n};t.ColorLegendElement=class extends lt{constructor(){super(...arguments),this.titleText="Color Legend Element",this.width=325,this.height=32,this.marginTop=6,this.marginRight=12,this.marginBottom=16,this.marginLeft=12,this.scaleType="continuous",this.domain=wt,this.range=$t,this.markType="circle",this.ticks=5,this.tickFormat=".1f",this.tickSize=6,this.colorScaleSetter=new pt(this),this.axisTickSetter=new xt(this),this.renderer=new bt(this)}get interpolator(){return this._interpolator}set interpolator(t){if("function"!=typeof t)throw new Error("interpolator must be a function.");{const i=this.interpolator;this._interpolator=t,this.requestUpdate("interpolator",i)}}get tickFormatter(){return this._tickFormatter}set tickFormatter(t){if("function"!=typeof t)throw new Error("tickFormatter must be a function.");{const i=this.tickFormatter;this._tickFormatter=t,this.requestUpdate("tickFormatter",i)}}get colorScale(){return this.colorScaleSetter.colorScale}get xScale(){return this.axisTickSetter.xScale}render(){return this.renderer.render()}willUpdate(t){St.some((i=>t.has(i)))&&this.colorScaleSetter.setColorScale(),kt.some((i=>t.has(i)))&&(this.axisTickSetter.setXScale(),this.axisTickSetter.handleAxisTicks())}},t.ColorLegendElement.styles=[Ct],Tt([ft({type:String})],t.ColorLegendElement.prototype,"titleText",void 0),Tt([ft({type:Number})],t.ColorLegendElement.prototype,"width",void 0),Tt([ft({type:Number})],t.ColorLegendElement.prototype,"height",void 0),Tt([ft({type:Number})],t.ColorLegendElement.prototype,"marginTop",void 0),Tt([ft({type:Number})],t.ColorLegendElement.prototype,"marginRight",void 0),Tt([ft({type:Number})],t.ColorLegendElement.prototype,"marginBottom",void 0),Tt([ft({type:Number})],t.ColorLegendElement.prototype,"marginLeft",void 0),Tt([ft({type:String})],t.ColorLegendElement.prototype,"scaleType",void 0),Tt([ft({type:Array})],t.ColorLegendElement.prototype,"domain",void 0),Tt([ft({type:Array})],t.ColorLegendElement.prototype,"range",void 0),Tt([ft({type:String})],t.ColorLegendElement.prototype,"markType",void 0),Tt([ft({type:Number})],t.ColorLegendElement.prototype,"ticks",void 0),Tt([ft({type:String})],t.ColorLegendElement.prototype,"tickFormat",void 0),Tt([ft({type:Number})],t.ColorLegendElement.prototype,"tickSize",void 0),Tt([ft({type:Array})],t.ColorLegendElement.prototype,"tickValues",void 0),Tt([function(t,i){return(e,s,r)=>{const o=i=>i.renderRoot?.querySelector(t)??null;if(i){const{get:t,set:i}="object"==typeof s?e:r??(()=>{const t=Symbol();return{get(){return this[t]},set(i){this[t]=i}}})();return gt(0,0,{get(){let e=t.call(this);return void 0===e&&(e=o(this),(null!==e||this.hasUpdated)&&i.call(this,e)),e}})}return gt(0,0,{get(){return o(this)}})}}("svg")],t.ColorLegendElement.prototype,"svg",void 0),Tt([ft({attribute:!1})],t.ColorLegendElement.prototype,"interpolator",null),Tt([ft({attribute:!1})],t.ColorLegendElement.prototype,"tickFormatter",null),t.ColorLegendElement=Tt([(t=>(i,e)=>{void 0!==e?e.addInitializer((()=>{customElements.define(t,i)})):customElements.define(t,i)})("color-legend")],t.ColorLegendElement),Object.defineProperty(t,"i",{value:!0})},"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("d3-scale"),require("d3-interpolate"),require("d3-format")):"function"==typeof define&&define.amd?define(["exports","d3-scale","d3-interpolate","d3-format"],i):i((t="undefined"!=typeof globalThis?globalThis:t||self)["color-legend-element"]={},t.d3,t.d3,t.d3); diff --git a/src/color-legend-element.ts b/src/color-legend-element.ts index ca05b3a..1eee2a0 100644 --- a/src/color-legend-element.ts +++ b/src/color-legend-element.ts @@ -25,7 +25,6 @@ import { DEFAULT_TICKS, DEFAULT_TICK_FORMAT, DEFAULT_TICK_SIZE, - DEFAULT_TICK_VALUES, } from "./constants"; @customElement("color-legend") @@ -120,7 +119,7 @@ export class ColorLegendElement extends LitElement { * The explicit values to be used for axis ticks */ @property({ type: Array }) - tickValues: number[] = DEFAULT_TICK_VALUES; + tickValues: number[]; /** * Reference to the SVG node diff --git a/src/constants.ts b/src/constants.ts index 83f1944..1eea464 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -10,7 +10,6 @@ export const DEFAULT_MARGIN_LEFT = 12; export const DEFAULT_TICKS = 5; export const DEFAULT_TICK_SIZE = 6; -export const DEFAULT_TICK_VALUES: number[] = null; export const DEFAULT_TICK_FORMAT = ".1f"; export const DEFAULT_DOMAIN = [0, 1]; diff --git a/src/test/x-scale-axis_test.ts b/src/test/x-scale-axis_test.ts index f4bd97d..3ebc44c 100644 --- a/src/test/x-scale-axis_test.ts +++ b/src/test/x-scale-axis_test.ts @@ -124,7 +124,7 @@ suite("AxisTicksSetter", () => { >`, )) as ColorLegendElement; await el.updateComplete; - assert.isNull(el.tickValues); + assert.isUndefined(el.tickValues); }); test("handleAxisTicks categorical", async () => { @@ -135,6 +135,6 @@ suite("AxisTicksSetter", () => { >`, )) as ColorLegendElement; await el.updateComplete; - assert.isNull(el.tickValues); + assert.isUndefined(el.tickValues); }); });