Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@forter/chart
Advanced tools
@forter/chart - npm Package Compare versions
Comparing version 5.1.0 to 5.2.0
@@ -6,2 +6,13 @@ # Change Log | ||
| # [5.2.0](https://github.com/forter/web-components/compare/@forter/chart@5.1.0...@forter/chart@5.2.0) (2021-08-24) | ||
| ### Features | ||
| * **chart:** chartjs storybook ([#736](https://github.com/forter/web-components/issues/736)) ([64751f6](https://github.com/forter/web-components/commit/64751f6)) | ||
| # [5.1.0](https://github.com/forter/web-components/compare/@forter/chart@5.0.0...@forter/chart@5.1.0) (2021-08-23) | ||
@@ -8,0 +19,0 @@ |
@@ -9,3 +9,3 @@ import { decorate as _decorate, get as _get, getPrototypeOf as _getPrototypeOf } from './_virtual/_rollupPluginBabelHelpers.js'; | ||
| const SUPPORTED_CHART_TYPES = ['line']; | ||
| const SUPPORTED_CHART_TYPES = ['line', 'bar']; | ||
| const DEFAULT_OPTIONS = { | ||
@@ -197,2 +197,12 @@ maintainAspectRatio: false, | ||
| } = this; | ||
| let updatesSeries; | ||
| _changedProperties.forEach(value => { | ||
| updatesSeries = value; | ||
| }); | ||
| if (this.chart && updatesSeries !== config) { | ||
| this.chart.destroy(); | ||
| } | ||
| this.chart = config && new Chart(this.context, this.getConfig(config)); | ||
@@ -219,3 +229,4 @@ } | ||
| }, | ||
| options: DEFAULT_OPTIONS | ||
| options: DEFAULT_OPTIONS, | ||
| ...config.style | ||
| }; | ||
@@ -222,0 +233,0 @@ return merge(chartJSConfig, basicConfig); |
| { | ||
| "name": "@forter/chart", | ||
| "version": "5.1.0", | ||
| "version": "5.2.0", | ||
| "description": "chart from Forter Components", | ||
@@ -58,3 +58,3 @@ "author": "Forter Developers", | ||
| }, | ||
| "gitHead": "b4415f07b29193a7beb422089347083743e075aa" | ||
| "gitHead": "a3ff4627aeb78f8d7c1597d7e79a622cb5f69ce5" | ||
| } |
@@ -8,3 +8,3 @@ import { LitElement, html, property } from 'lit-element'; | ||
| export const SUPPORTED_CHART_TYPES = ['line']; | ||
| export const SUPPORTED_CHART_TYPES = ['line', 'bar']; | ||
@@ -140,2 +140,9 @@ | ||
| const { config } = this; | ||
| let updatesSeries; | ||
| _changedProperties.forEach(value => { | ||
| updatesSeries = value; | ||
| }); | ||
| if (this.chart && updatesSeries !== config) { | ||
| this.chart.destroy(); | ||
| } | ||
| this.chart = config && new Chart(this.context, this.getConfig(config)); | ||
@@ -160,3 +167,4 @@ } | ||
| }, | ||
| options: DEFAULT_OPTIONS | ||
| options: DEFAULT_OPTIONS, | ||
| ...config.style | ||
| }; | ||
@@ -163,0 +171,0 @@ |
@@ -10,2 +10,7 @@ import {html} from 'lit-html'; | ||
| import { enumerateProperties } from '../../../lib/storybook-helpers'; | ||
| const story = enumerateProperties(FcChart); | ||
| export default { | ||
@@ -19,1 +24,688 @@ title: 'Display Components|Chart', | ||
| }; | ||
| let rateAggregationOverTimeDimensionDataFirstLine = [ | ||
| { | ||
| dimensions: [ | ||
| "2021/07/12", | ||
| ], | ||
| value: 0.46, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/13", | ||
| ], | ||
| value: 0.5, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/14", | ||
| ], | ||
| value: 0.5, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/15", | ||
| ], | ||
| value: 0.6192407247627265, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/16", | ||
| ], | ||
| value: 0.68994992032779422, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/17", | ||
| ], | ||
| value: 0.74282392406510884, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/18", | ||
| ], | ||
| value: 0.79248911619256943, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/19", | ||
| ], | ||
| value: 0.70702664256290195, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/20", | ||
| ], | ||
| value: 0.68067185309398796, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/21", | ||
| ], | ||
| value: 0.55872390129945976, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/22", | ||
| ], | ||
| value: 0.48470161081174537, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/23", | ||
| ], | ||
| value: 0.4867554812115419, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/24", | ||
| ], | ||
| value: 0.462344455892843, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/25", | ||
| ], | ||
| value: 0.7565814176644833, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/26", | ||
| ], | ||
| value: 0.64782113682293, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/27", | ||
| ], | ||
| value: 0.6190845718795213, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/28", | ||
| ], | ||
| value: 0.6098716246126605, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/29", | ||
| ], | ||
| value: 0.72812669486929166, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/30", | ||
| ], | ||
| value: 0.80034633509339694, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/31", | ||
| ], | ||
| value: 0.5788814753729665, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/01", | ||
| ], | ||
| value: 0.293684554973822, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/02", | ||
| ], | ||
| value: 0.92041749670323506, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/03", | ||
| ], | ||
| value: 0.9983155795770583, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/04", | ||
| ], | ||
| value: 0.7096080744527461, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/05", | ||
| ], | ||
| value: 0.80619364534134823, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/06", | ||
| ], | ||
| value: 0.79923391509705664, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/07", | ||
| ], | ||
| value: 0.77232829438463557, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/08", | ||
| ], | ||
| value: 0.79565913182636527, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/09", | ||
| ], | ||
| value: 0.73816967417843014, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/10", | ||
| ], | ||
| value: 0.7011357715952902, | ||
| }, | ||
| ]; | ||
| let rateAggregationOverTimeDimensionDataSecondLine = [ | ||
| { | ||
| dimensions: [ | ||
| "2021/07/12", | ||
| ], | ||
| value: 0.8239331542823037, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/13", | ||
| ], | ||
| value: 0.808929045973957, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/14", | ||
| ], | ||
| value: 0.8052814083755668, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/15", | ||
| ], | ||
| value: 0.8080106809078772, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/16", | ||
| ], | ||
| value: 0.8128188775510204, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/17", | ||
| ], | ||
| value: 0.8433670751198722, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/18", | ||
| ], | ||
| value: 0.8174807197943444, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/19", | ||
| ], | ||
| value: 0.8075201432408237, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/20", | ||
| ], | ||
| value: 0.8134068485200232, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/21", | ||
| ], | ||
| value: 0.8280397818415143, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/22", | ||
| ], | ||
| value: 0.8146013448607109, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/23", | ||
| ], | ||
| value: 0.8096377306903623, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/24", | ||
| ], | ||
| value: 0.8313061872025383, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/25", | ||
| ], | ||
| value: 0.8243801652892562, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/26", | ||
| ], | ||
| value: 0.7781579697747363, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/27", | ||
| ], | ||
| value: 0.803103263777421, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/28", | ||
| ], | ||
| value: 0.8068493150684931, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/29", | ||
| ], | ||
| value: 0.8044016506189822, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/30", | ||
| ], | ||
| value: 0.8037127206329885, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/07/31", | ||
| ], | ||
| value: 0.8142458100558659, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/01", | ||
| ], | ||
| value: 0.824468085106383, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/02", | ||
| ], | ||
| value: 0.8126904959822665, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/03", | ||
| ], | ||
| value: 0.8164211674849973, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/04", | ||
| ], | ||
| value: 0.8125643666323378, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/05", | ||
| ], | ||
| value: 0.8133475139590535, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/06", | ||
| ], | ||
| value: 0.8142424242424242, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/07", | ||
| ], | ||
| value: 0.8241610738255034, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/08", | ||
| ], | ||
| value: 0.8288372093023256, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/09", | ||
| ], | ||
| value: 0.7951496388028896, | ||
| }, | ||
| { | ||
| dimensions: [ | ||
| "2021/08/10", | ||
| ], | ||
| value: 0.8064344589204999, | ||
| }, | ||
| ]; | ||
| const annotationData = { | ||
| label: "annotation", | ||
| seriesType: "LINE", | ||
| style: { | ||
| borderColor: "#007914" | ||
| }, | ||
| filters: { | ||
| }, | ||
| isAnnotation: true, | ||
| aggregation: { | ||
| key: "THREEDS_OF_ALL_TRANSACTIONS_RATE", | ||
| label: "Approved Txs", | ||
| isRate: true, | ||
| mode: "COUNT", | ||
| dimensions: [ | ||
| ], | ||
| data: { | ||
| data: [ | ||
| 0.024282392406510884 | ||
| ], | ||
| dimensions: [ | ||
| ], | ||
| } | ||
| }, | ||
| } | ||
| const firstPrimarySeries = { | ||
| label: "first", | ||
| seriesType: "BAR", | ||
| style: { | ||
| borderColor: "#1F75F7", | ||
| backgroundColor: "#1F75F7", | ||
| borderRadius: 2, | ||
| fill: { | ||
| above: "#ADE9B740", | ||
| below: "#FFC5C640", | ||
| target: "+1" | ||
| } | ||
| }, | ||
| filters: { | ||
| }, | ||
| aggregation: { | ||
| key: "THREEDS_OF_ALL_TRANSACTIONS_RATE", | ||
| label: "Approved Txs", | ||
| isRate: true, | ||
| mode: "COUNT", | ||
| dimensions: [ | ||
| { | ||
| key: "aggregatedProcessorName", | ||
| label: "Tx time", | ||
| }, | ||
| ], | ||
| data: rateAggregationOverTimeDimensionDataFirstLine | ||
| }, | ||
| }; | ||
| const secondPrimarySeries = { | ||
| label: "second", | ||
| seriesType: "BAR", | ||
| style: { | ||
| borderColor: "#BDD8FF", | ||
| backgroundColor: "#BDD8FF", | ||
| borderRadius: 2 | ||
| }, | ||
| filters: { | ||
| }, | ||
| aggregation: { | ||
| key: "OTHER_THREEDS_OF_ALL_TRANSACTIONS_RATE", | ||
| label: "Approved Txs", | ||
| isRate: true, | ||
| mode: "COUNT", | ||
| dimensions: [ | ||
| { | ||
| key: "aggregatedProcessorName", | ||
| label: "Tx time", | ||
| }, | ||
| ], | ||
| data: rateAggregationOverTimeDimensionDataSecondLine | ||
| }, | ||
| }; | ||
| const chartByConfig = () => { | ||
| let forterSymbol = '%'; | ||
| let config = { | ||
| label: "I am config", | ||
| filters: { | ||
| available: [ | ||
| { | ||
| searchKey: "transId", | ||
| dataSource: "TRANSACTIONS", | ||
| }, | ||
| { | ||
| searchKey: "paymentMethod", | ||
| dataSource: "TRANSACTIONS", | ||
| }, | ||
| ], | ||
| active: [ | ||
| { | ||
| name: "transTime", | ||
| arguments: [ | ||
| "12 Jul 2021 00:00", | ||
| "10 Aug 2021 23:59", | ||
| ], | ||
| children: [ | ||
| ], | ||
| operator: "DATE RANGE", | ||
| dataSource: "TRANSACTIONS", | ||
| }, | ||
| ], | ||
| backendSearch: [ | ||
| ], | ||
| }, | ||
| widgets: [ | ||
| { | ||
| widgetId: "widget1", | ||
| linkedToOriginal: null, | ||
| originalWidgetId: null, | ||
| actions: [ | ||
| { | ||
| action: "COUNT_SUM_TOGGLE", | ||
| defaultValue: "COUNT", | ||
| }, | ||
| ], | ||
| label: "Widget #1", | ||
| filters: { | ||
| }, | ||
| dataSource: "TRANSACTIONS", | ||
| widgetType: "CHART", | ||
| primary: { | ||
| series: [ | ||
| // firstPrimarySeries | ||
| ], | ||
| style: { | ||
| options: { | ||
| scales: { | ||
| y: { | ||
| min: 0, | ||
| max: 1.5, | ||
| ticks: { | ||
| forterSymbol | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| } | ||
| ], | ||
| } | ||
| function getWidgetPrimaryOptions(value) { | ||
| if (value === 'rate') { | ||
| forterSymbol = '%'; | ||
| } else if (value === 'sum') { | ||
| forterSymbol = '$' | ||
| } else { | ||
| return; | ||
| } | ||
| return { | ||
| scales: { | ||
| y: { | ||
| ticks: { | ||
| forterSymbol | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| const SERIES_TYPES = { | ||
| FIRST: { | ||
| ELEMENT_ID: 'first-series-checkbox', | ||
| SERIES_VALUE: firstPrimarySeries, | ||
| SERIES_LABEL: 'first' | ||
| }, | ||
| SECOND: { | ||
| ELEMENT_ID: 'second-series-checkbox', | ||
| SERIES_VALUE: secondPrimarySeries, | ||
| SERIES_LABEL: 'second' | ||
| }, | ||
| ANNOTATION: { | ||
| ELEMENT_ID: 'show-annotation-checkbox', | ||
| SERIES_VALUE: annotationData, | ||
| SERIES_LABEL: 'annotation' | ||
| } | ||
| } | ||
| function toggleSeries(seriesType) { | ||
| const {ELEMENT_ID, SERIES_VALUE, SERIES_LABEL} = seriesType; | ||
| const configTextArea = document.querySelector('fc-textarea'); | ||
| const firstSeries = document.getElementById(ELEMENT_ID); | ||
| if (firstSeries) { | ||
| if (firstSeries.valueOf().checked) { | ||
| config.widgets[0].primary.series.push(SERIES_VALUE); | ||
| } else { | ||
| config.widgets[0].primary.series = config.widgets[0].primary.series.filter(singleSeries => singleSeries.label !== SERIES_LABEL); | ||
| } | ||
| configTextArea.value = JSON.stringify(config, undefined, 4); | ||
| updateTextAreaConfig(); | ||
| updateChart() | ||
| } | ||
| } | ||
| function onSeriesColorChange(event, seriesType) { | ||
| seriesType.SERIES_VALUE.style.borderColor = event.target.value; | ||
| updateTextAreaConfig(); | ||
| updateChart() | ||
| } | ||
| function onSeriesSymbolSelect(event) { | ||
| config.widgets[0].primary.style.options = getWidgetPrimaryOptions(event.detail.value); | ||
| updateTextAreaConfig(); | ||
| updateChart(); | ||
| } | ||
| function onSeriesTypeSelect(event) { | ||
| const type = event.detail.value; | ||
| if (['line', 'bar'].includes(type.toLowerCase())) { | ||
| firstPrimarySeries.seriesType = event.detail.value; | ||
| secondPrimarySeries.seriesType = event.detail.value; | ||
| updateTextAreaConfig(); | ||
| updateChart(); | ||
| } | ||
| } | ||
| function randomizeData() { | ||
| const [min, max] = [10, 80]; | ||
| firstPrimarySeries.aggregation.data = rateAggregationOverTimeDimensionDataFirstLine.map(singleData => { | ||
| return { | ||
| ...singleData, | ||
| value: Math.floor(Math.random() * (max-min) + min) | ||
| } | ||
| }); | ||
| secondPrimarySeries.aggregation.data = rateAggregationOverTimeDimensionDataSecondLine.map(singleData => { | ||
| return { | ||
| ...singleData, | ||
| value: Math.floor(Math.random() * (max-min) + min) | ||
| } | ||
| }); | ||
| config.widgets[0].primary.style.options.scales.y.min = 0; | ||
| config.widgets[0].primary.style.options.scales.y.max = 100; | ||
| updateTextAreaConfig(); | ||
| updateChart() | ||
| } | ||
| function changeConfigFromTextArea(input) { | ||
| config = JSON.parse(input.detail.target.value); | ||
| updateChart(); | ||
| } | ||
| function updateTextAreaConfig() { | ||
| const configTextArea = document.querySelector('fc-textarea'); | ||
| configTextArea.value = JSON.stringify(config, undefined, 4); | ||
| } | ||
| function updateChart() { | ||
| const chart = document.querySelector('fc-chart'); | ||
| chart.config = {...config.widgets[0].primary}; | ||
| } | ||
| return html` | ||
| <fc-card> | ||
| <h1>ChartJS Config js</h1> | ||
| <div id="data-container" style=" display: flex; justify-content: space-between;"> | ||
| <div> | ||
| Series 1 | ||
| <fc-checkbox id="first-series-checkbox" @change="${() => toggleSeries(SERIES_TYPES.FIRST)}">Show</fc-checkbox> | ||
| <fc-input name="color" value="${firstPrimarySeries.style.borderColor}" @change="${(event) => onSeriesColorChange(event, SERIES_TYPES.FIRST)}"></fc-input> | ||
| </div> | ||
| <div> | ||
| Series 2 | ||
| <fc-checkbox id="second-series-checkbox" @change="${() => toggleSeries(SERIES_TYPES.SECOND)}">Show</fc-checkbox> | ||
| <fc-input name="color" value="${secondPrimarySeries.style.borderColor}" @change="${(event) => onSeriesColorChange(event, SERIES_TYPES.SECOND)}"></fc-input> | ||
| </div> | ||
| <div> | ||
| Annotation: | ||
| <fc-checkbox id="show-annotation-checkbox" @change="${() => toggleSeries(SERIES_TYPES.ANNOTATION)}">Show</fc-checkbox> | ||
| <fc-input name="color" value="${annotationData.style.borderColor}" @change="${(event) => onSeriesColorChange(event, SERIES_TYPES.ANNOTATION)}"> | ||
| </fc-input> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| Series type: | ||
| <div style=" display: flex; justify-content: flex-start;"> | ||
| <fc-select id="select-series-type" @select="${onSeriesSymbolSelect}" value="rate"> | ||
| <option value="rate">Rate</option> | ||
| <option value="sum">Sum</option> | ||
| <option value="count">Count</option> | ||
| </fc-select> | ||
| <fc-select id="select-series-type" @select="${onSeriesTypeSelect}" value="bar"> | ||
| <option value="bar">Bar</option> | ||
| <option value="line">Line</option> | ||
| </fc-select> | ||
| <fc-button @click="${randomizeData}">randomize</fc-button> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| Enter config | ||
| <fc-textarea id="config-textarea" @change="${changeConfigFromTextArea}" value="${JSON.stringify(config, undefined, 4)}"> | ||
| </fc-textarea> | ||
| </div> | ||
| <div> | ||
| </div> | ||
| </fc-card> | ||
| <fc-chart .config="${config.widgets[0].primary}"></fc-chart> | ||
| bla | ||
| ` | ||
| } | ||
| export const blablaChart = () => story(chartByConfig()) |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by22.13%
75535
- Lines of code
- increased by64.97%
1719
No dependency changes