Skip to content

Commit

Permalink
Avoid overriding highcharts default theme with theme customization (#308
Browse files Browse the repository at this point in the history
)

Moved classes with custom css properties to their original
location in Highcharts theme
  • Loading branch information
alvarezguille authored Mar 21, 2018
1 parent ff18633 commit a936e47
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 69 deletions.
3 changes: 2 additions & 1 deletion test/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@
'js-json-api-chart-test.html',
'js-private-api-chart-test.html',
'style-test.html',
'element-json-merge-test.html'
'element-json-merge-test.html',
'theme-test.html'
].reduce(function(suites, suite) {
return suites.concat([suite, `${suite}?wc-shadydom=true`]);
}, []));
Expand Down
53 changes: 53 additions & 0 deletions test/theme-test.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!doctype html>

<head>
<meta charset="UTF-8">
<title>vaadin-chart tests</title>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../vaadin-chart.html">
</head>

<body>
<test-fixture id="empty-chart">
<template>
<vaadin-chart>
</vaadin-chart>
</template>
</test-fixture>

<script>
describe('Test defaults in theme', function() {
var chart;

beforeEach(done => {
chart = fixture('empty-chart');
Polymer.flush();
setTimeout(() => {
done();
}, 100);
});


it('data label connectors should have no fill', function(done) {
const check = () => {
const chartContainer = chart.$.chart;
const connectors = Array.from(chartContainer.querySelectorAll('.highcharts-data-label-connector'));
expect(connectors).to.have.lengthOf(3);
connectors.forEach(connector => expect(window.getComputedStyle(connector).fill).to.equal('none'));
done();
};
chart.update({
series: [{
type: 'pie',
data: [29.9, 71.5, 50],
events: {
afterAnimate: check
}
}]
});
});


});
</script>
</body>
91 changes: 23 additions & 68 deletions vaadin-chart-default-theme.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<dom-module id="vaadin-chart-default-theme" theme-for="vaadin-chart">
<template>
<style>
/* When updating this file do not override vaadin-charts custom properties section */
/* disable stylelint for highcharts css */
/* stylelint-disable */
/**
Expand Down Expand Up @@ -213,55 +214,57 @@

/* Series options */
/* Default colors */
/* vaadin-charts custom properties */
.highcharts-color-0 {
fill: #7cb5ec;
stroke: #7cb5ec;
fill: var(--vaadin-charts-color-0, #7cb5ec);
stroke: var(--vaadin-charts-color-0, #7cb5ec);
}

.highcharts-color-1 {
fill: #434348;
stroke: #434348;
fill: var(--vaadin-charts-color-1, #434348);
stroke: var(--vaadin-charts-color-1, #434348);
}

.highcharts-color-2 {
fill: #90ed7d;
stroke: #90ed7d;
fill: var(--vaadin-charts-color-2, #90ed7d);
stroke: var(--vaadin-charts-color-2, #90ed7d);
}

.highcharts-color-3 {
fill: #f7a35c;
stroke: #f7a35c;
fill: var(--vaadin-charts-color-3, #f7a35c);
stroke: var(--vaadin-charts-color-3, #f7a35c);
}

.highcharts-color-4 {
fill: #8085e9;
stroke: #8085e9;
fill: var(--vaadin-charts-color-4, #8085e9);
stroke: var(--vaadin-charts-color-4, #8085e9);
}

.highcharts-color-5 {
fill: #f15c80;
stroke: #f15c80;
fill: var(--vaadin-charts-color-5, #f15c80);
stroke: var(--vaadin-charts-color-5, #f15c80);
}

.highcharts-color-6 {
fill: #e4d354;
stroke: #e4d354;
fill: var(--vaadin-charts-color-6, #e4d354);
stroke: var(--vaadin-charts-color-6, #e4d354);
}

.highcharts-color-7 {
fill: #2b908f;
stroke: #2b908f;
fill: var(--vaadin-charts-color-7, #2b908f);
stroke: var(--vaadin-charts-color-7, #2b908f);
}

.highcharts-color-8 {
fill: #f45b5b;
stroke: #f45b5b;
fill: var(--vaadin-charts-color-8, #f45b5b);
stroke: var(--vaadin-charts-color-8, #f45b5b);
}

.highcharts-color-9 {
fill: #91e8e1;
stroke: #91e8e1;
fill: var(--vaadin-charts-color-9, #91e8e1);
stroke: var(--vaadin-charts-color-9, #91e8e1);
}
/* end of vaadin-charts custom properties */

.highcharts-area {
fill-opacity: 0.75;
Expand Down Expand Up @@ -821,56 +824,8 @@
stroke: #333333;
}

/* vaadin-charts custom properties */
.highcharts-color-0 {
fill: var(--vaadin-charts-color-0, #7cb5ec);
stroke: var(--vaadin-charts-color-0, #7cb5ec);
}

.highcharts-color-1 {
fill: var(--vaadin-charts-color-1, #434348);
stroke: var(--vaadin-charts-color-1, #434348);
}

.highcharts-color-2 {
fill: var(--vaadin-charts-color-2, #90ed7d);
stroke: var(--vaadin-charts-color-2, #90ed7d);
}

.highcharts-color-3 {
fill: var(--vaadin-charts-color-3, #f7a35c);
stroke: var(--vaadin-charts-color-3, #f7a35c);
}

.highcharts-color-4 {
fill: var(--vaadin-charts-color-4, #8085e9);
stroke: var(--vaadin-charts-color-4, #8085e9);
}

.highcharts-color-5 {
fill: var(--vaadin-charts-color-5, #f15c80);
stroke: var(--vaadin-charts-color-5, #f15c80);
}

.highcharts-color-6 {
fill: var(--vaadin-charts-color-6, #e4d354);
stroke: var(--vaadin-charts-color-6, #e4d354);
}

.highcharts-color-7 {
fill: var(--vaadin-charts-color-7, #2b908f);
stroke: var(--vaadin-charts-color-7, #2b908f);
}

.highcharts-color-8 {
fill: var(--vaadin-charts-color-8, #f45b5b);
stroke: var(--vaadin-charts-color-8, #f45b5b);
}

.highcharts-color-9 {
fill: var(--vaadin-charts-color-9, #91e8e1);
stroke: var(--vaadin-charts-color-9, #91e8e1);
}

/* stylelint-enable */
</style>
Expand Down

0 comments on commit a936e47

Please sign in to comment.