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 3.0.2 to 4.0.0
@@ -6,2 +6,20 @@ # Change Log | ||
| # [4.0.0](https://github.com/forter/web-components/compare/@forter/chart@3.0.2...@forter/chart@4.0.0) (2019-09-19) | ||
| ### Bug Fixes | ||
| * **layout:** remove slots from fc-card ([b6d4aad](https://github.com/forter/web-components/commit/b6d4aad)) | ||
| ### BREAKING CHANGES | ||
| * **layout:** removes named slots from <fc-card> | ||
| affects: @forter/layout | ||
| ## [3.0.2](https://github.com/forter/web-components/compare/@forter/chart@3.0.1...@forter/chart@3.0.2) (2019-09-16) | ||
@@ -8,0 +26,0 @@ |
| { | ||
| "name": "@forter/chart", | ||
| "version": "3.0.2", | ||
| "version": "4.0.0", | ||
| "description": "Chart from Forter Components", | ||
@@ -49,3 +49,3 @@ "main": "index.js", | ||
| }, | ||
| "gitHead": "95651597e8de75c722b9e06ebba9fba86f66108e" | ||
| "gitHead": "0aae1f4ddd21eb0daaab2d0b142f7eb25bd511e1" | ||
| } |
| import { html } from 'lit-html'; | ||
| import { storiesOf } from '@storybook/polymer'; | ||
| import { enumerateProperties } from '../../../lib/storybook-helpers'; | ||
@@ -7,2 +7,3 @@ | ||
| import './chart.css'; | ||
| import '../src'; | ||
@@ -12,4 +13,2 @@ import { FcChart } from '../src/FcChart'; | ||
| import markdown from '../README.md'; | ||
| const notes = { markdown }; | ||
| const options = { selectedPanel: 'storybooks/knobs/panel' }; | ||
@@ -36,14 +35,2 @@ const story = enumerateProperties(FcChart); | ||
| function randomizeData(min, max) { | ||
| console.log(min, max) | ||
| const chart = document.querySelector('fc-chart').chart; | ||
| chart.data.datasets.forEach(function(dataset) { | ||
| dataset.data = dataset.data.map(function() { | ||
| return randomScalingFactor(min, max); | ||
| }); | ||
| }); | ||
| chart.update(); | ||
| } | ||
| const data = { | ||
@@ -67,39 +54,101 @@ labels: ['ApplePay', 'Visa', 'MasterCard', 'Paypal', 'AMEX', 'Dinners', 'Discover', 'JCB', 'Unipay'], | ||
| } | ||
| function chartByType(type) { | ||
| return function() { | ||
| let max = 100, min = 10; | ||
| return html` | ||
| <div style="display: grid;grid-auto-flow: column;place-items: center;grid-column-gap: 10px;grid-template-columns: repeat(8, min-content);"> | ||
| <label> Colors </label> | ||
| <fc-button intent="apply" @click="${e => changeChartOption('palette', 'default')}"> Default</fc-button> | ||
| <fc-button intent="success" @change="${() => randomizeData(min, max)}" @click="${e => changeChartOption('palette', 'positive')}"> Positive</fc-button> | ||
| <fc-button intent="danger" @change="${() => randomizeData(min, max)}" @click="${e => changeChartOption('palette', 'negative')}"> Negative</fc-button> | ||
| <label> Values</label> | ||
| <fc-input style="width:100px" label="Min" .value=${min} @select=${e => min = e.target.value*1}></fc-input> | ||
| <fc-input style="width:100px" label="Max" .value=${max} @select=${e => max = e.target.value*1}></fc-input> | ||
| <fc-button @click=${() => randomizeData(min, max)}> Randomize Data</fc-button> | ||
| </div> | ||
| <fc-card> | ||
| <h1 slot="title" style="text-transform: capitalize;">${text('title', type)}</h1> | ||
| <div slot="subtitle" style="margin-bottom: 15px">${text('subtitle', 'Showing nice visualization of data')} </div> | ||
| <fc-chart | ||
| type="${type}" | ||
| .palette="${select('palette', ['default', 'positive', 'negative'], 'default')}" | ||
| .data="${data}"></fc-chart> | ||
| </fc-card> | ||
| `; | ||
| } | ||
| function randomizeData() { | ||
| const { min, max } = properties; | ||
| const chart = document.querySelector('fc-chart').chart; | ||
| chart.data.datasets.forEach(function(dataset) { | ||
| dataset.data = dataset.data.map(function() { | ||
| return randomScalingFactor(min, max); | ||
| }); | ||
| }); | ||
| chart.update(); | ||
| } | ||
| const properties = new Proxy({ min: 10, max: 100 }, { | ||
| set: randomizeData | ||
| }) | ||
| function update({ target: { value, dataset: { bound }}}) { | ||
| properties[bound] = value * 1; | ||
| } | ||
| function palletteUpdate({ target: { dataset: { pallette } } }) { | ||
| changeChartOption('palette', pallette) | ||
| randomizeData() | ||
| } | ||
| return html` | ||
| <fc-card> | ||
| <div id="chart-controls"> | ||
| <section id="chart-theme"> | ||
| <h2>Theme</h2> | ||
| <fc-button | ||
| intent="apply" | ||
| data-pallette="default" | ||
| @click="${palletteUpdate}" | ||
| >Default</fc-button> | ||
| <fc-button | ||
| intent="success" | ||
| data-pallette="positive" | ||
| @click="${palletteUpdate}" | ||
| >Positive</fc-button> | ||
| <fc-button | ||
| intent="danger" | ||
| data-pallette="negative" | ||
| @click="${palletteUpdate}" | ||
| >Negative</fc-button> | ||
| </section> | ||
| <section id="chart-values"> | ||
| <h2>Values</h2> | ||
| <fc-input | ||
| data-bound="min" | ||
| label="Min" | ||
| type="number" | ||
| .value="${properties.min}" | ||
| @input=${update} | ||
| ></fc-input> | ||
| <fc-input | ||
| data-bound="max" | ||
| type="number" | ||
| label="Max" | ||
| .value="${properties.max}" | ||
| @input=${update} | ||
| ></fc-input> | ||
| </section> | ||
| <fc-button id="chart-randomizer" @click=${randomizeData}> Randomize Data</fc-button> | ||
| </div> | ||
| </fc-card> | ||
| <fc-card id="fc-chart"> | ||
| <h1>${text('title', type)}</h1> | ||
| <div>${text('subtitle', 'Showing nice visualization of data')} </div> | ||
| <fc-chart | ||
| type="${type}" | ||
| palette="${select('palette', ['default', 'positive', 'negative'], 'default')}" | ||
| .data="${data}" | ||
| ></fc-chart> | ||
| </fc-card> | ||
| `; | ||
| } | ||
| (storiesOf('Data Components|Chart', module) | ||
| .addDecorator(withKnobs) | ||
| .addParameters({ notes, options }) | ||
| .add('Element Properties', () => story(html`<fc-chart></fc-chart>`)) | ||
| .add('Bar (Vertical)', chartByType('bar')) | ||
| .add('Bar (Horizontal)', chartByType('horizontalBar')) | ||
| .add('Pie Chart', chartByType('pie')) | ||
| .add('Donut Chart', chartByType('doughnut')) | ||
| .add('Polar Chart', chartByType('polarArea')) | ||
| .add('Line Chart', chartByType('line')) | ||
| .add('Radar Chart', chartByType('radar')) | ||
| ); | ||
| export const elementProperties = () => story(html`<fc-chart></fc-chart>`) | ||
| export const verticalBarChart = () => story(chartByType('bar')) | ||
| export const horizontalBarChart = () => story(chartByType('horizontalBar')) | ||
| export const pieChart = () => story(chartByType('pie')) | ||
| export const doughnutChart = () => story(chartByType('doughnut')) | ||
| export const polarAreaChart = () => story(chartByType('polarArea')) | ||
| export const lineChart = () => story(chartByType('line')) | ||
| export const radarChart = () => story(chartByType('radar')) | ||
| export default { | ||
| title: 'Data Components|Chart', | ||
| decorators: [withKnobs], | ||
| parameters: { | ||
| notes: { markdown }, | ||
| options: { selectedPanel: 'storybooks/knobs/panel' }, | ||
| }, | ||
| }; |
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 by1.93%
58226
- Number of package files
- increased by4.55%
23
- Lines of code
- increased by6.71%
1034
No dependency changes