Skip to content
This repository has been archived by the owner on Nov 30, 2024. It is now read-only.

Commit

Permalink
Got a series of stories working for the Peity clone components.
Browse files Browse the repository at this point in the history
  • Loading branch information
@JohnMunsch
JohnMunsch committed Jul 20, 2019
1 parent 757637c commit 9d71c93
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 59 deletions.
10 changes: 1 addition & 9 deletions app/js/peity.components.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,9 +251,7 @@ class DonutElement extends PieElement {
}
}

// As with the pie and donut simply being to variations of the same custom
// element, there's a good chance these two will lead to only one
// implementation.
// TODO: This component is only partially implemented. I've never gone back to finish all the d3 stuff.
class LineElement extends BaseElement {
constructor() {
super();
Expand Down Expand Up @@ -421,9 +419,3 @@ customElements.define('wc-pie', PieElement);
customElements.define('wc-donut', DonutElement);
customElements.define('wc-line', LineElement);
customElements.define('wc-bar', BarElement);

window.addEventListener('WebComponentsReady', function(e) {
// This is just testing the function the WebComponents polyfill provides. It
// gets called at the same point whether it polyfilled anything or not.
console.log('Components are ready');
});
113 changes: 63 additions & 50 deletions stories/peity.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,58 +3,71 @@ import { storiesOf } from '@storybook/html';

import '../app/js/peity.components';

storiesOf('Peity', module).add(
'heading',
() => /* html */ `
<h2>Interactive Example</h2>
<wc-pie class="interactive">0.5,1,2</wc-pie>
storiesOf('Peity', module)
.add(
'Pie Charts',
() => /* html */ `
<h2>Pie Charts</h2>
<button onclick="changeProperties('wc-pie.interactive')">Change Properties</button>
<div>
<wc-pie>1/5</wc-pie>
<wc-pie>226/360</wc-pie>
<wc-pie>0.52/1.561</wc-pie>
<wc-pie>1,4</wc-pie>
<wc-pie>226,134</wc-pie>
<wc-pie>0.52,1.041</wc-pie>
<wc-pie>1,2,3,2,2</wc-pie>
</div>`
)
.add(
'Donut Charts',
() => /* html */ `
<h2>Donut Charts</h2>
<h2>Pie Charts</h2>
<div>
<wc-pie>1/5</wc-pie>
<wc-pie>226/360</wc-pie>
<wc-pie>0.52/1.561</wc-pie>
<wc-pie>1,4</wc-pie>
<wc-pie>226,134</wc-pie>
<wc-pie>0.52,1.041</wc-pie>
<wc-pie>1,2,3,2,2</wc-pie>
</div>
<div>
<wc-donut>1/5</wc-donut>
<wc-donut>226/360</wc-donut>
<wc-donut>0.52/1.561</wc-donut>
<wc-donut>1,4</wc-donut>
<wc-donut>226,134</wc-donut>
<wc-donut>0.52,1.041</wc-donut>
<wc-donut>1,2,3,2,2</wc-donut>
</div>`
)
.add(
'Line Charts',
() => /* html */ `
<h2>Line Charts</h2>
<h2>Donut Charts</h2>
<div>
<wc-donut>1/5</wc-donut>
<wc-donut>226/360</wc-donut>
<wc-donut>0.52/1.561</wc-donut>
<wc-donut>1,4</wc-donut>
<wc-donut>226,134</wc-donut>
<wc-donut>0.52,1.041</wc-donut>
<wc-donut>1,2,3,2,2</wc-donut>
</div>
<div>
<wc-line>5,3,9,6,5,9,7,3,5,2</wc-line>
<wc-line>5,3,2,-1,-3,-2,2,3,5,2</wc-line>
<wc-line>0,-3,-6,-4,-5,-4,-7,-3,-5,-2</wc-line>
</div>`
)
.add(
'Bar Charts',
() => /* html */ `
<h2>Bar Charts</h2>
<h2>Line Charts</h2>
<div>
<wc-line>5,3,9,6,5,9,7,3,5,2</wc-line>
<wc-line>5,3,2,-1,-3,-2,2,3,5,2</wc-line>
<wc-line>0,-3,-6,-4,-5,-4,-7,-3,-5,-2</wc-line>
</div>
<div>
<wc-bar>5,3,9,6,5,9,7,3,5,2</wc-bar>
<wc-bar>5,3,2,-1,-3,-2,2,3,5,2</wc-bar>
<wc-bar>0,-3,-6,-4,-5,-4,-7,-3,-5,-2</wc-bar>
</div>`
)
.add(
'Attributes',
() => /* html */ `
<h2>Attributes</h2>
<h2>Bar Charts</h2>
<div>
<wc-bar>5,3,9,6,5,9,7,3,5,2</wc-bar>
<wc-bar>5,3,2,-1,-3,-2,2,3,5,2</wc-bar>
<wc-bar>0,-3,-6,-4,-5,-4,-7,-3,-5,-2</wc-bar>
</div>
<h2>Attributes</h2>
<div>
<wc-donut fill='["red", "#eeeeee"]' inner-radius="10" radius="40">1/7</wc-donut>
<wc-donut fill='["orange", "#eeeeee"]' inner-radius="14" radius="36">2/7</wc-donut>
<wc-donut fill='["yellow", "#eeeeee"]' inner-radius="16" radius="32">3/7</wc-donut>
<wc-donut fill='["green", "#eeeeee"]' inner-radius="18" radius="28">4/7</wc-donut>
<wc-donut fill='["blue", "#eeeeee"]' inner-radius="20" radius="24">5/7</wc-donut>
<wc-donut fill='["indigo", "#eeeeee"]' inner-radius="18" radius="20">6/7</wc-donut>
<wc-donut fill='["violet", "#eeeeee"]' inner-radius="15" radius="16">7/7</wc-donut>
</div> `
);
<div>
<wc-donut fill='["red", "#eeeeee"]' inner-radius="10" radius="40">1/7</wc-donut>
<wc-donut fill='["orange", "#eeeeee"]' inner-radius="14" radius="36">2/7</wc-donut>
<wc-donut fill='["yellow", "#eeeeee"]' inner-radius="16" radius="32">3/7</wc-donut>
<wc-donut fill='["green", "#eeeeee"]' inner-radius="18" radius="28">4/7</wc-donut>
<wc-donut fill='["blue", "#eeeeee"]' inner-radius="20" radius="24">5/7</wc-donut>
<wc-donut fill='["indigo", "#eeeeee"]' inner-radius="18" radius="20">6/7</wc-donut>
<wc-donut fill='["violet", "#eeeeee"]' inner-radius="15" radius="16">7/7</wc-donut>
</div>`
);

0 comments on commit 9d71c93

Please sign in to comment.