@unovis/ts 1.0.3-beta.4 → 1.0.3-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/flow-legend/config.d.ts +4 -1
- package/components/flow-legend/config.js +2 -1
- package/components/flow-legend/config.js.map +1 -1
- package/components/flow-legend/index.js +16 -14
- package/components/flow-legend/index.js.map +1 -1
- package/components/flow-legend/style.d.ts +1 -1
- package/components/flow-legend/style.js +5 -2
- package/components/flow-legend/style.js.map +1 -1
- package/package.json +1 -1
|
@@ -12,6 +12,8 @@ export interface FlowLegendConfigInterface {
|
|
|
12
12
|
labelFontSize?: number;
|
|
13
13
|
/** Arrow symbol. Default: `'▶'` */
|
|
14
14
|
arrowSymbol?: string;
|
|
15
|
+
/** Color of the arrow. Default: `undefined` */
|
|
16
|
+
arrowColor?: string;
|
|
15
17
|
/** Callback function for the legend item click. Default: `undefined` */
|
|
16
18
|
onLegendItemClick?: ((label?: string, i?: number) => void);
|
|
17
19
|
}
|
|
@@ -19,8 +21,9 @@ export declare class FlowLegendConfig extends Config implements FlowLegendConfig
|
|
|
19
21
|
customWidth: any;
|
|
20
22
|
items: any[];
|
|
21
23
|
labelFontSize: number;
|
|
22
|
-
arrowSymbol: string;
|
|
23
24
|
lineColor: any;
|
|
24
25
|
labelColor: any;
|
|
26
|
+
arrowSymbol: string;
|
|
27
|
+
arrowColor: any;
|
|
25
28
|
onLegendItemClick: any;
|
|
26
29
|
}
|
|
@@ -6,9 +6,10 @@ class FlowLegendConfig extends Config {
|
|
|
6
6
|
this.customWidth = undefined;
|
|
7
7
|
this.items = [];
|
|
8
8
|
this.labelFontSize = 12;
|
|
9
|
-
this.arrowSymbol = '▶';
|
|
10
9
|
this.lineColor = undefined;
|
|
11
10
|
this.labelColor = undefined;
|
|
11
|
+
this.arrowSymbol = '▶';
|
|
12
|
+
this.arrowColor = undefined;
|
|
12
13
|
this.onLegendItemClick = undefined;
|
|
13
14
|
}
|
|
14
15
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sources":["../../../src/components/flow-legend/config.ts"],"sourcesContent":["import { Config } from 'core/config'\n\nexport interface FlowLegendConfigInterface {\n /** Custom width of the component. Default: `undefined` */\n customWidth?: number;\n /** Legend items array as string[]. Default: `[]` */\n items?: string[];\n /** Color of the flow line. Default: `undefined` */\n lineColor?: string;\n /** Color of the flow label. Default: `undefined` */\n labelColor?: string;\n /** Font size of flow labels in pixels. Default: `12` */\n labelFontSize?: number;\n /** Arrow symbol. Default: `'▶'` */\n arrowSymbol?: string;\n /** Callback function for the legend item click. Default: `undefined` */\n onLegendItemClick?: ((label?: string, i?: number) => void);\n}\n\nexport class FlowLegendConfig extends Config implements FlowLegendConfigInterface {\n customWidth = undefined\n items = []\n labelFontSize = 12\n
|
|
1
|
+
{"version":3,"file":"config.js","sources":["../../../src/components/flow-legend/config.ts"],"sourcesContent":["import { Config } from 'core/config'\n\nexport interface FlowLegendConfigInterface {\n /** Custom width of the component. Default: `undefined` */\n customWidth?: number;\n /** Legend items array as string[]. Default: `[]` */\n items?: string[];\n /** Color of the flow line. Default: `undefined` */\n lineColor?: string;\n /** Color of the flow label. Default: `undefined` */\n labelColor?: string;\n /** Font size of flow labels in pixels. Default: `12` */\n labelFontSize?: number;\n /** Arrow symbol. Default: `'▶'` */\n arrowSymbol?: string;\n /** Color of the arrow. Default: `undefined` */\n arrowColor?: string;\n /** Callback function for the legend item click. Default: `undefined` */\n onLegendItemClick?: ((label?: string, i?: number) => void);\n}\n\nexport class FlowLegendConfig extends Config implements FlowLegendConfigInterface {\n customWidth = undefined\n items = []\n labelFontSize = 12\n lineColor = undefined\n labelColor = undefined\n arrowSymbol = '▶'\n arrowColor = undefined\n onLegendItemClick = undefined\n}\n"],"names":[],"mappings":";;AAqBM,MAAO,gBAAiB,SAAQ,MAAM,CAAA;AAA5C,IAAA,WAAA,GAAA;;QACE,IAAW,CAAA,WAAA,GAAG,SAAS,CAAA;QACvB,IAAK,CAAA,KAAA,GAAG,EAAE,CAAA;QACV,IAAa,CAAA,aAAA,GAAG,EAAE,CAAA;QAClB,IAAS,CAAA,SAAA,GAAG,SAAS,CAAA;QACrB,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;QACtB,IAAW,CAAA,WAAA,GAAG,GAAG,CAAA;QACjB,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;QACtB,IAAiB,CAAA,iBAAA,GAAG,SAAS,CAAA;KAC9B;AAAA;;;;"}
|
|
@@ -20,21 +20,21 @@ class FlowLegend {
|
|
|
20
20
|
this.render();
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
23
|
-
const { config
|
|
24
|
-
if (!items.length)
|
|
23
|
+
const { config } = this;
|
|
24
|
+
if (!config.items.length)
|
|
25
25
|
return;
|
|
26
|
-
if (customWidth)
|
|
27
|
-
this.div.style('width', `${customWidth}px`);
|
|
26
|
+
if (config.customWidth)
|
|
27
|
+
this.div.style('width', `${config.customWidth}px`);
|
|
28
28
|
// Prepare Data
|
|
29
|
-
const legendData = items.reduce((acc, label, i) => {
|
|
29
|
+
const legendData = config.items.reduce((acc, label, i) => {
|
|
30
30
|
acc.push({
|
|
31
31
|
text: label,
|
|
32
32
|
index: i,
|
|
33
33
|
type: FlowLegendItemType.Label,
|
|
34
34
|
});
|
|
35
|
-
if (arrowSymbol && (acc.length !== items.length * 2 - 1)) {
|
|
35
|
+
if (config.arrowSymbol && (acc.length !== config.items.length * 2 - 1)) {
|
|
36
36
|
acc.push({
|
|
37
|
-
text: arrowSymbol,
|
|
37
|
+
text: config.arrowSymbol,
|
|
38
38
|
index: i,
|
|
39
39
|
type: FlowLegendItemType.Symbol,
|
|
40
40
|
});
|
|
@@ -51,21 +51,23 @@ class FlowLegend {
|
|
|
51
51
|
legendItemsEnter.filter(d => d.type === FlowLegendItemType.Label)
|
|
52
52
|
.on('click', this._onItemClick.bind(this));
|
|
53
53
|
legendItemsEnter.append('span')
|
|
54
|
-
.attr('class', d => d.type === FlowLegendItemType.Symbol
|
|
55
|
-
|
|
54
|
+
.attr('class', d => d.type === FlowLegendItemType.Symbol
|
|
55
|
+
? arrow(config.arrowColor)
|
|
56
|
+
: label(config.labelFontSize, config.labelColor))
|
|
57
|
+
.classed(clickable, d => d.type === FlowLegendItemType.Label && !!config.onLegendItemClick);
|
|
56
58
|
const legendItemsMerged = legendItemsEnter.merge(legendItems);
|
|
57
59
|
smartTransition(legendItemsMerged, 500)
|
|
58
60
|
.attr('opacity', 1);
|
|
59
61
|
legendItemsMerged.select('span').text(d => d.text);
|
|
60
62
|
legendItems.exit().remove();
|
|
61
63
|
this.line
|
|
62
|
-
.attr('class', line(lineColor))
|
|
63
|
-
.style('opacity', items.length > 1 ? 1 : 0);
|
|
64
|
+
.attr('class', line(config.lineColor))
|
|
65
|
+
.style('opacity', config.items.length > 1 ? 1 : 0);
|
|
64
66
|
}
|
|
65
67
|
_onItemClick(event, d) {
|
|
66
|
-
const { config
|
|
67
|
-
if (onLegendItemClick)
|
|
68
|
-
onLegendItemClick(d.text, d.index);
|
|
68
|
+
const { config } = this;
|
|
69
|
+
if (config.onLegendItemClick)
|
|
70
|
+
config.onLegendItemClick(d.text, d.index);
|
|
69
71
|
}
|
|
70
72
|
}
|
|
71
73
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/flow-legend/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Utils\nimport { smartTransition } from 'utils/d3'\n\n// Config\nimport { FlowLegendConfig, FlowLegendConfigInterface } from './config'\n\n// Local Types\nimport { FlowLegendItem, FlowLegendItemType } from './types'\n\n// Styles\nimport * as s from './style'\n\nexport class FlowLegend {\n div: Selection<HTMLElement, any, HTMLElement, any>\n element: HTMLElement\n line: Selection<HTMLElement, any, HTMLElement, any>\n labels: Selection<HTMLElement, any, HTMLElement, any>\n prevConfig: FlowLegendConfig\n config: FlowLegendConfig\n protected _container: HTMLElement\n\n constructor (element: HTMLElement, config?: FlowLegendConfigInterface) {\n this._container = element\n\n this.div = select(this._container).append('div').attr('class', s.root)\n this.element = this.div.node()\n\n this.line = this.div.append('div')\n this.labels = this.div.append('div').attr('class', s.labels)\n\n if (config) this.update(config)\n }\n\n update (config: FlowLegendConfigInterface): void {\n this.prevConfig = this.config\n this.config = new FlowLegendConfig().init(config)\n this.render()\n }\n\n render (): void {\n const { config
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/flow-legend/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Utils\nimport { smartTransition } from 'utils/d3'\n\n// Config\nimport { FlowLegendConfig, FlowLegendConfigInterface } from './config'\n\n// Local Types\nimport { FlowLegendItem, FlowLegendItemType } from './types'\n\n// Styles\nimport * as s from './style'\n\nexport class FlowLegend {\n div: Selection<HTMLElement, any, HTMLElement, any>\n element: HTMLElement\n line: Selection<HTMLElement, any, HTMLElement, any>\n labels: Selection<HTMLElement, any, HTMLElement, any>\n prevConfig: FlowLegendConfig\n config: FlowLegendConfig\n protected _container: HTMLElement\n\n constructor (element: HTMLElement, config?: FlowLegendConfigInterface) {\n this._container = element\n\n this.div = select(this._container).append('div').attr('class', s.root)\n this.element = this.div.node()\n\n this.line = this.div.append('div')\n this.labels = this.div.append('div').attr('class', s.labels)\n\n if (config) this.update(config)\n }\n\n update (config: FlowLegendConfigInterface): void {\n this.prevConfig = this.config\n this.config = new FlowLegendConfig().init(config)\n this.render()\n }\n\n render (): void {\n const { config } = this\n if (!config.items.length) return\n\n if (config.customWidth) this.div.style('width', `${config.customWidth}px`)\n\n // Prepare Data\n const legendData: FlowLegendItem[] = config.items.reduce((acc, label, i) => {\n acc.push({\n text: label,\n index: i,\n type: FlowLegendItemType.Label,\n })\n\n if (config.arrowSymbol && (acc.length !== config.items.length * 2 - 1)) {\n acc.push({\n text: config.arrowSymbol,\n index: i,\n type: FlowLegendItemType.Symbol,\n })\n }\n return acc\n }, [])\n\n // Draw\n const legendItems = this.labels.selectAll(`.${s.item}`)\n .data(legendData) as Selection<HTMLDivElement, FlowLegendItem, HTMLDivElement, FlowLegendItem>\n\n const legendItemsEnter = legendItems.enter()\n .append('div')\n .attr('class', s.item)\n .attr('opacity', 0)\n\n legendItemsEnter.filter(d => d.type === FlowLegendItemType.Label)\n .on('click', this._onItemClick.bind(this))\n\n legendItemsEnter.append('span')\n .attr('class',\n d => d.type === FlowLegendItemType.Symbol\n ? s.arrow(config.arrowColor)\n : s.label(config.labelFontSize, config.labelColor)\n )\n .classed(s.clickable, d => d.type === FlowLegendItemType.Label && !!config.onLegendItemClick)\n\n const legendItemsMerged = legendItemsEnter.merge(legendItems)\n smartTransition(legendItemsMerged, 500)\n .attr('opacity', 1)\n legendItemsMerged.select('span').text(d => d.text)\n\n legendItems.exit().remove()\n\n this.line\n .attr('class', s.line(config.lineColor))\n .style('opacity', config.items.length > 1 ? 1 : 0)\n }\n\n _onItemClick (event: MouseEvent, d: FlowLegendItem): void {\n const { config } = this\n\n if (config.onLegendItemClick) config.onLegendItemClick(d.text, d.index)\n }\n}\n"],"names":["s.root","s.labels","s.item","s.arrow","s.label","s.clickable","s.line"],"mappings":"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"}
|
|
@@ -5,4 +5,4 @@ export declare const labels: string;
|
|
|
5
5
|
export declare const item: string;
|
|
6
6
|
export declare const clickable: string;
|
|
7
7
|
export declare const label: (labelFontSize: number, labelColor: string) => string;
|
|
8
|
-
export declare const arrow: (
|
|
8
|
+
export declare const arrow: (arrowColor: string) => string;
|
|
@@ -11,16 +11,19 @@ const globalStyles = injectGlobal `
|
|
|
11
11
|
--vis-flow-legend-label-background: #ffffff;
|
|
12
12
|
--vis-flow-legend-label-color: #71788a;
|
|
13
13
|
--vis-flow-legend-link-color: #E5E9F7;
|
|
14
|
+
--vis-flow-legend-arrow-color: #E5E9F7;
|
|
14
15
|
|
|
15
16
|
--vis-dark-flow-legend-label-background: #292b34;
|
|
16
17
|
--vis-dark-flow-legend-label-color: #E5E9F7;
|
|
17
18
|
--vis-dark-flow-legend-link-color: #71788a;
|
|
19
|
+
--vis-dark-flow-legend-arrow-color: #71788a;
|
|
18
20
|
}
|
|
19
21
|
|
|
20
22
|
body.theme-dark ${`.${root}`} {
|
|
21
23
|
--vis-flow-legend-label-background: var(--vis-dark-flow-legend-label-background);
|
|
22
24
|
--vis-flow-legend-label-color: var(--vis-dark-flow-legend-label-color);
|
|
23
25
|
--vis-flow-legend-link-color: var(--vis-dark-flow-legend-link-color);
|
|
26
|
+
--vis-flow-legend-arrow-color: var(--vis-dark-flow-legend-arrow-color);
|
|
24
27
|
}
|
|
25
28
|
`;
|
|
26
29
|
const line = (lineColor) => css `
|
|
@@ -68,12 +71,12 @@ const label = (labelFontSize, labelColor) => css `
|
|
|
68
71
|
display: inline-table;
|
|
69
72
|
text-align: center;
|
|
70
73
|
`;
|
|
71
|
-
const arrow = (
|
|
74
|
+
const arrow = (arrowColor) => css `
|
|
72
75
|
label: arrow;
|
|
73
76
|
|
|
74
77
|
font-size: 9px;
|
|
75
78
|
vertical-align: middle;
|
|
76
|
-
color: ${
|
|
79
|
+
color: ${arrowColor || 'var(--vis-flow-legend-arrow-color)'};
|
|
77
80
|
`;
|
|
78
81
|
|
|
79
82
|
export { arrow, clickable, globalStyles, item, label, labels, line, root };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/flow-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: flow-legend-component;\n\n position: relative;\n user-select: none;\n`\n\nexport const globalStyles = injectGlobal`\n :root {\n --vis-flow-legend-label-background: #ffffff;\n --vis-flow-legend-label-color: #71788a;\n --vis-flow-legend-link-color: #E5E9F7;\n\n --vis-dark-flow-legend-label-background: #292b34;\n --vis-dark-flow-legend-label-color: #E5E9F7;\n --vis-dark-flow-legend-link-color: #71788a;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-flow-legend-label-background: var(--vis-dark-flow-legend-label-background);\n --vis-flow-legend-label-color: var(--vis-dark-flow-legend-label-color);\n --vis-flow-legend-link-color: var(--vis-dark-flow-legend-link-color);\n }\n`\n\nexport const line = (lineColor: string): string => css`\n label: line;\n\n height: 2px;\n width: 100%;\n background-color: ${lineColor || 'var(--vis-flow-legend-link-color)'};\n position: absolute;\n top: 50%;\n`\n\nexport const labels = css`\n label: labels;\n\n position: relative;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n`\n\nexport const item = css`\n label: item;\n\n position: relative;\n max-width: 50px;\n\n padding: 10px;\n`\n\nexport const clickable = css`\n cursor: pointer;\n\n &:hover {\n text-decoration: underline;\n }\n`\n\nexport const label = (labelFontSize: number, labelColor: string): string => css`\n label: label;\n\n transform: translate(-50%, 0%);\n margin-left: 7px;\n background-color: var(--vis-flow-legend-label-background);\n padding: 5px 15px;\n font-size: ${labelFontSize}px;\n color: ${labelColor || 'var(--vis-flow-legend-label-color)'};\n display: inline-table;\n text-align: center;\n`\n\nexport const arrow = (
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/flow-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: flow-legend-component;\n\n position: relative;\n user-select: none;\n`\n\nexport const globalStyles = injectGlobal`\n :root {\n --vis-flow-legend-label-background: #ffffff;\n --vis-flow-legend-label-color: #71788a;\n --vis-flow-legend-link-color: #E5E9F7;\n --vis-flow-legend-arrow-color: #E5E9F7;\n\n --vis-dark-flow-legend-label-background: #292b34;\n --vis-dark-flow-legend-label-color: #E5E9F7;\n --vis-dark-flow-legend-link-color: #71788a;\n --vis-dark-flow-legend-arrow-color: #71788a;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-flow-legend-label-background: var(--vis-dark-flow-legend-label-background);\n --vis-flow-legend-label-color: var(--vis-dark-flow-legend-label-color);\n --vis-flow-legend-link-color: var(--vis-dark-flow-legend-link-color);\n --vis-flow-legend-arrow-color: var(--vis-dark-flow-legend-arrow-color);\n }\n`\n\nexport const line = (lineColor: string): string => css`\n label: line;\n\n height: 2px;\n width: 100%;\n background-color: ${lineColor || 'var(--vis-flow-legend-link-color)'};\n position: absolute;\n top: 50%;\n`\n\nexport const labels = css`\n label: labels;\n\n position: relative;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n`\n\nexport const item = css`\n label: item;\n\n position: relative;\n max-width: 50px;\n\n padding: 10px;\n`\n\nexport const clickable = css`\n cursor: pointer;\n\n &:hover {\n text-decoration: underline;\n }\n`\n\nexport const label = (labelFontSize: number, labelColor: string): string => css`\n label: label;\n\n transform: translate(-50%, 0%);\n margin-left: 7px;\n background-color: var(--vis-flow-legend-label-background);\n padding: 5px 15px;\n font-size: ${labelFontSize}px;\n color: ${labelColor || 'var(--vis-flow-legend-label-color)'};\n display: inline-table;\n text-align: center;\n`\n\nexport const arrow = (arrowColor: string): string => css`\n label: arrow;\n\n font-size: 9px;\n vertical-align: middle;\n color: ${arrowColor || 'var(--vis-flow-legend-arrow-color)'};\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;EAKtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;AAapB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;EAM7B;AAEY,MAAA,IAAI,GAAG,CAAC,SAAiB,KAAa,GAAG,CAAA,CAAA;;;;;AAKhC,oBAAA,EAAA,SAAS,IAAI,mCAAmC,CAAA;;;EAGrE;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQxB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;EAOtB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;EAM3B;AAEM,MAAM,KAAK,GAAG,CAAC,aAAqB,EAAE,UAAkB,KAAa,GAAG,CAAA,CAAA;;;;;;;eAOhE,aAAa,CAAA;AACjB,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;EAG5D;AAEY,MAAA,KAAK,GAAG,CAAC,UAAkB,KAAa,GAAG,CAAA,CAAA;;;;;AAK7C,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unovis/ts",
|
|
3
3
|
"description": "Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript",
|
|
4
|
-
"version": "1.0.3-beta.
|
|
4
|
+
"version": "1.0.3-beta.5",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/f5/unovis.git",
|