Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

color-legend-element

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

color-legend-element - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

index.js

4

build/color-legend-element.bundled.js

@@ -39,3 +39,3 @@ import{scaleSequential as t,scaleLinear as i,scaleQuantize as e,scaleThreshold as s,scaleOrdinal as n}from"d3-scale";import{interpolateHcl as r,piecewise as o}from"d3-interpolate";import{format as l}from"d3-format";

* SPDX-License-Identifier: BSD-3-Clause
*/}class ct{constructor(t){this.cle=t}setColorScale(){switch(this.cle.scaleType){case"continuous":this.setContinousColorScale();break;case"discrete":this.setDiscreteColorScale();break;case"threshold":this.setThresholdColorScale();break;case"categorical":this.setCategoricalColorScale();break;default:this.invalidScaleType(this.cle.scaleType)}}setContinousColorScale(){const{interpolator:e,domain:s,range:n}=this.cle;this.colorScale=e?t(e).domain(s):i().range(n).domain(s).interpolate(r)}setDiscreteColorScale(){this.colorScale=e().domain(this.cle.domain).range(this.cle.range)}setThresholdColorScale(){const t=this.cle.domain;this.colorScale=s().domain(t.slice(1,t.length-1)).range(this.cle.range)}setCategoricalColorScale(){this.colorScale=n().domain(this.cle.domain).range(this.cle.range)}invalidScaleType(t){throw new Error(`invalid property scaletype: ${t}. \n Must be one of "categorical", "continuous", "discrete", "threshold".`)}}
*/}class ct{constructor(t){this.cle=t}setColorScale(){switch(this.cle.scaleType){case"continuous":this.setContinousColorScale();break;case"discrete":this.setDiscreteColorScale();break;case"threshold":this.setThresholdColorScale();break;case"categorical":this.setCategoricalColorScale();break;default:this.invalidScaleType(this.cle.scaleType)}}setContinousColorScale(){const{interpolator:e,domain:s,range:n}=this.cle;this.colorScale=e?t(e).domain(s):i().range(n).domain(s).interpolate(r)}setDiscreteColorScale(){this.colorScale=e().domain(this.cle.domain).range(this.cle.range)}setThresholdColorScale(){const t=this.cle.domain;this.colorScale=s().domain(t.slice(1,t.length-1)).range(this.cle.range)}setCategoricalColorScale(){this.colorScale=n().domain(this.cle.domain).range(this.cle.range)}invalidScaleType(t){throw new Error(`invalid property scaletype: ${t}.\n Must be one of "categorical", "continuous", "discrete", "threshold".`)}}
/**

@@ -78,3 +78,3 @@ * @license

${t}
</li>`))}`}renderContinuous(){var t,i;if("continuous"!==this.cle.scaleType||null===this.cle.colorScale)return"";const{colorScale:e,marginTop:s,marginLeft:n,marginRight:l,tickSize:h,width:c,range:a}=this.cle,d=this.cle.marginBottom+h,u=this.cle.height+h,v=(null===(i=(t=e).interpolator)||void 0===i?void 0:i.call(t))||o(r,a);return I`<image
</li>`))}`}renderContinuous(){var t,i;if("continuous"!==this.cle.scaleType||null===this.cle.colorScale)return"";const{colorScale:e,marginTop:s,marginLeft:n,marginRight:l,tickSize:h,width:c,range:a}=this.cle,d=this.cle.marginBottom+h,u=this.cle.height+h,v=(null===(i=(t=e).interpolator)||void 0===i?void 0:i.call(t))||o(r,a);return I`<image
x=${n}

@@ -81,0 +81,0 @@ y=${s}

4

build/color-legend-element.umd.js

@@ -40,3 +40,3 @@ var t,i;t=this,i=function(t,i,e,s){

* SPDX-License-Identifier: BSD-3-Clause
*/}class ot{constructor(t){this.cle=t}setColorScale(){switch(this.cle.scaleType){case"continuous":this.setContinousColorScale();break;case"discrete":this.setDiscreteColorScale();break;case"threshold":this.setThresholdColorScale();break;case"categorical":this.setCategoricalColorScale();break;default:this.invalidScaleType(this.cle.scaleType)}}setContinousColorScale(){const{interpolator:t,domain:s,range:n}=this.cle;this.colorScale=t?i.scaleSequential(t).domain(s):i.scaleLinear().range(n).domain(s).interpolate(e.interpolateHcl)}setDiscreteColorScale(){this.colorScale=i.scaleQuantize().domain(this.cle.domain).range(this.cle.range)}setThresholdColorScale(){const t=this.cle.domain;this.colorScale=i.scaleThreshold().domain(t.slice(1,t.length-1)).range(this.cle.range)}setCategoricalColorScale(){this.colorScale=i.scaleOrdinal().domain(this.cle.domain).range(this.cle.range)}invalidScaleType(t){throw new Error(`invalid property scaletype: ${t}. \n Must be one of "categorical", "continuous", "discrete", "threshold".`)}}
*/}class ot{constructor(t){this.cle=t}setColorScale(){switch(this.cle.scaleType){case"continuous":this.setContinousColorScale();break;case"discrete":this.setDiscreteColorScale();break;case"threshold":this.setThresholdColorScale();break;case"categorical":this.setCategoricalColorScale();break;default:this.invalidScaleType(this.cle.scaleType)}}setContinousColorScale(){const{interpolator:t,domain:s,range:n}=this.cle;this.colorScale=t?i.scaleSequential(t).domain(s):i.scaleLinear().range(n).domain(s).interpolate(e.interpolateHcl)}setDiscreteColorScale(){this.colorScale=i.scaleQuantize().domain(this.cle.domain).range(this.cle.range)}setThresholdColorScale(){const t=this.cle.domain;this.colorScale=i.scaleThreshold().domain(t.slice(1,t.length-1)).range(this.cle.range)}setCategoricalColorScale(){this.colorScale=i.scaleOrdinal().domain(this.cle.domain).range(this.cle.range)}invalidScaleType(t){throw new Error(`invalid property scaletype: ${t}.\n Must be one of "categorical", "continuous", "discrete", "threshold".`)}}
/**

@@ -78,3 +78,3 @@ * @license

${t}
</li>`))}`}renderContinuous(){var t,i;if("continuous"!==this.cle.scaleType||null===this.cle.colorScale)return"";const{colorScale:s,marginTop:n,marginLeft:o,marginRight:r,tickSize:l,width:h,range:c}=this.cle,a=this.cle.marginBottom+l,d=this.cle.height+l,u=(null===(i=(t=s).interpolator)||void 0===i?void 0:i.call(t))||e.piecewise(e.interpolateHcl,c);return j`<image
</li>`))}`}renderContinuous(){var t,i;if("continuous"!==this.cle.scaleType||null===this.cle.colorScale)return"";const{colorScale:s,marginTop:n,marginLeft:o,marginRight:r,tickSize:l,width:h,range:c}=this.cle,a=this.cle.marginBottom+l,d=this.cle.height+l,u=(null===(i=(t=s).interpolator)||void 0===i?void 0:i.call(t))||e.piecewise(e.interpolateHcl,c);return j`<image
x=${o}

@@ -81,0 +81,0 @@ y=${n}

10

build/color-scale.js

@@ -12,12 +12,12 @@ import { scaleSequential, scaleLinear, scaleThreshold, scaleOrdinal, scaleQuantize, } from "d3-scale";

switch (this.cle.scaleType) {
case "continuous" /* Continuous */:
case "continuous":
this.setContinousColorScale();
break;
case "discrete" /* Discrete */:
case "discrete":
this.setDiscreteColorScale();
break;
case "threshold" /* Threshold */:
case "threshold":
this.setThresholdColorScale();
break;
case "categorical" /* Categorical */:
case "categorical":
this.setCategoricalColorScale();

@@ -71,3 +71,3 @@ break;

invalidScaleType(value) {
throw new Error(`invalid property scaletype: ${value}.
throw new Error(`invalid property scaletype: ${value}.
Must be one of "categorical", "continuous", "discrete", "threshold".`);

@@ -74,0 +74,0 @@ }

4

build/constants.d.ts

@@ -15,6 +15,6 @@ import { MarkType, ScaleType } from "./types";

export declare const DEFAULT_TITLE_TEXT = "Color Legend Element";
export declare const DEFAULT_MARK_TYPE = MarkType.Circle;
export declare const DEFAULT_SCALE_TYPE = ScaleType.Continuous;
export declare const DEFAULT_MARK_TYPE: MarkType;
export declare const DEFAULT_SCALE_TYPE: ScaleType;
export declare const COLOR_SCALE_PROPS: string[];
export declare const AXIS_AND_X_SCALE_PROPS: string[];
//# sourceMappingURL=constants.d.ts.map

4

build/constants.js

@@ -20,4 +20,4 @@ export const DEFAULT_WIDTH = 325;

export const DEFAULT_TITLE_TEXT = "Color Legend Element";
export const DEFAULT_MARK_TYPE = "circle" /* Circle */;
export const DEFAULT_SCALE_TYPE = "continuous" /* Continuous */;
export const DEFAULT_MARK_TYPE = "circle";
export const DEFAULT_SCALE_TYPE = "continuous";
export const COLOR_SCALE_PROPS = [

@@ -24,0 +24,0 @@ "domain",

21

build/renderer.js

@@ -16,5 +16,5 @@ import { svg, html } from "lit";

: "";
const svgClasses = { hidden: this.cle.scaleType === "categorical" /* Categorical */ };
const svgClasses = { hidden: this.cle.scaleType === "categorical" };
const categoricalClasses = {
hidden: this.cle.scaleType !== "categorical" /* Categorical */,
hidden: this.cle.scaleType !== "categorical",
"categorical-container": true,

@@ -51,3 +51,3 @@ };

renderCategorical() {
if (this.cle.scaleType !== "categorical" /* Categorical */) {
if (this.cle.scaleType !== "categorical") {
return "";

@@ -58,4 +58,4 @@ }

"legend-item": true,
line: markType === "line" /* Line */,
circle: markType === "circle" /* Circle */,
line: markType === "line",
circle: markType === "circle",
};

@@ -75,4 +75,3 @@ return html `${domain.map((category) => html `<li

var _a, _b;
if (this.cle.scaleType !== "continuous" /* Continuous */ ||
this.cle.colorScale === null) {
if (this.cle.scaleType !== "continuous" || this.cle.colorScale === null) {
return "";

@@ -85,3 +84,3 @@ }

piecewise(interpolateHcl, range);
return svg `<image
return svg `<image
x=${marginLeft}

@@ -100,4 +99,4 @@ y=${marginTop}

renderDiscreteThreshold() {
if (this.cle.scaleType !== "discrete" /* Discrete */ &&
this.cle.scaleType !== "threshold" /* Threshold */) {
if (this.cle.scaleType !== "discrete" &&
this.cle.scaleType !== "threshold") {
return "";

@@ -129,3 +128,3 @@ }

renderAxis() {
if (!this.cle.xScale || this.cle.scaleType === "categorical" /* Categorical */)
if (!this.cle.xScale || this.cle.scaleType === "categorical")
return "";

@@ -132,0 +131,0 @@ const { ticks, tickSize, tickFormat, tickFormatter, tickValues, xScale, marginTop, } = this.cle;

16

build/test/x-scale-axis_test.js

@@ -13,3 +13,3 @@ import { fixture, assert } from "@open-wc/testing";

const cle = new ColorLegendElement();
cle.scaleType = "continuous" /* Continuous */;
cle.scaleType = "continuous";
const ats = new AxisTicksSetter(cle);

@@ -21,3 +21,3 @@ ats.setXScale();

const cle = new ColorLegendElement();
cle.scaleType = "discrete" /* Discrete */;
cle.scaleType = "discrete";
cle.domain = [0, 1, 2, 3, 4, 5];

@@ -30,3 +30,3 @@ const ats = new AxisTicksSetter(cle);

const cle = new ColorLegendElement();
cle.scaleType = "threshold" /* Threshold */;
cle.scaleType = "threshold";
cle.domain = [0, 1, 2, 3, 4, 5];

@@ -39,3 +39,3 @@ const ats = new AxisTicksSetter(cle);

const cle = new ColorLegendElement();
cle.scaleType = "categorical" /* Categorical */;
cle.scaleType = "categorical";
const ats = new AxisTicksSetter(cle);

@@ -61,3 +61,3 @@ ats.setXScale();

const el = (await fixture(html `<color-legend
scaleType=${"discrete" /* Discrete */}
scaleType=${"discrete"}
.domain=${[0.1, 1]}

@@ -83,3 +83,3 @@ .range=${[

const el = (await fixture(html `<color-legend
scaleType=${"threshold" /* Threshold */}
scaleType=${"threshold"}
.domain=${expected}

@@ -92,3 +92,3 @@ ></color-legend>`));

const el = (await fixture(html `<color-legend
scaleType=${"continuous" /* Continuous */}
scaleType=${"continuous"}
.domain=${[0, 100]}

@@ -101,3 +101,3 @@ ></color-legend>`));

const el = (await fixture(html `<color-legend
scaleType=${"categorical" /* Categorical */}
scaleType=${"categorical"}
.domain=${["a", "b", "c"]}

@@ -104,0 +104,0 @@ ></color-legend>`));

15

build/types.d.ts

@@ -7,14 +7,7 @@ import { ScaleBand, ScaleDiverging, ScaleSequential, ScaleOrdinal, ScaleQuantile, ScaleQuantize, ScaleThreshold, ScaleLinear } from "d3-scale";

export declare type TickFormatter = (d: number) => string;
export declare const enum MarkType {
Rect = "rect",
Circle = "circle",
Line = "line"
}
export declare const enum ScaleType {
Categorical = "categorical",
Continuous = "continuous",
Discrete = "discrete",
Threshold = "threshold"
}
/** the type of shape rendered when ScaleType is "categorical" */
export declare type MarkType = "rect" | "circle" | "line";
/** available scales, similar to those of d3-scale */
export declare type ScaleType = "categorical" | "continuous" | "discrete" | "threshold";
export declare type ChangedProps = Map<string, number | string>;
//# sourceMappingURL=types.d.ts.map

11

build/x-scale-axis.js

@@ -14,3 +14,3 @@ import { scaleLinear } from "d3-scale";

switch (scaleType) {
case "continuous" /* Continuous */:
case "continuous":
this.xScale = scaleLinear()

@@ -20,4 +20,4 @@ .domain(this.cle.domain)

break;
case "discrete" /* Discrete */:
case "threshold" /* Threshold */:
case "discrete":
case "threshold":
this.xScale = scaleLinear()

@@ -30,3 +30,3 @@ .domain([

break;
case "categorical" /* Categorical */:
case "categorical":
// xScale is not used for ScaleType.Categorical

@@ -46,4 +46,3 @@ this.xScale = null;

const { scaleType } = this.cle;
if (scaleType !== "continuous" /* Continuous */ &&
scaleType !== "categorical" /* Categorical */) {
if (scaleType !== "continuous" && scaleType !== "categorical") {
const [min, max] = this.xScale.domain();

@@ -50,0 +49,0 @@ this.cle.tickValues = this.cle.tickValues || [

10

package.json
{
"name": "color-legend-element",
"version": "1.0.5",
"version": "1.0.6",
"description": "A custom element (web component) suitable for use as a legend in data visualizations",
"main": "build/color-legend-element.umd.js",
"main": "index.js",
"module": "index.js",

@@ -94,5 +94,5 @@ "type": "module",

"@web/dev-server-rollup": "^0.3.9",
"@web/test-runner": "^0.13.16",
"@web/test-runner-mocha": "^0.7.4",
"@web/test-runner-playwright": "^0.8.4",
"@web/test-runner": "^0.18.0",
"@web/test-runner-mocha": "^0.9.0",
"@web/test-runner-playwright": "^0.11.0",
"@webcomponents/webcomponentsjs": "^2.6.0",

@@ -99,0 +99,0 @@ "deepmerge": "^4.2.2",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc