luxolus/open-nomad
2
0
Fork 0
Code Issues 1 Pull requests Packages Releases Wiki Activity

Don't deal with color classes at all in LineChart

Browse source 
Expect this to be set on the visual yielded components directly
This commit is contained in:
Michael Lange 2021-02-25 19:34:05 -08:00
parent 1905d8ad71
commit 4a4e7f0af2
3 changed files with 11 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ui/app/components/chart-primitives/area.js
View file

@ -5,7 +5,10 @@ import uniquely from 'nomad-ui/utils/properties/uniquely';
export default class ChartPrimitiveArea extends Component {
get colorClass() {
return this.args.colorClass || `${this.args.colorScale}-${this.args.index}`;
if (this.args.colorClass) return this.args.colorClass;
if (this.args.colorScale && this.args.index != null)
return `${this.args.colorScale} ${this.args.colorScale}-${this.args.index + 1}`;
return 'is-primary';
}
@uniquely('area-mask') maskId;

1
ui/app/templates/components/line-chart.hbs
View file

@ -18,7 +18,6 @@
{{#if this.ready}}
{{yield (hash
Area=(component "chart-primitives/area"
colorClass=this.chartClass
curve="linear"
xScale=this.xScale
yScale=this.yScale

15
ui/stories/charts/line-chart.stories.js
View file

@ -49,9 +49,9 @@ export let Standard = () => {
</div>
<div class="block" style="height:100px; width: 400px;">
{{#if this.lineChartMild}}
<LineChart @data={{this.lineChartMild}} @xProp="year" @yProp="value" @chartClass="is-info">
<LineChart @data={{this.lineChartMild}} @xProp="year" @yProp="value">
<:svg as |c|>
<c.Area @data={{this.lineChartMild}} />
<c.Area @data={{this.lineChartMild}} @colorClass="is-info" />
</:svg>
</LineChart>
{{/if}}
@ -70,18 +70,18 @@ export let FluidWidth = () => {
<h5 class="title is-5">Fluid-width Line Chart</h5>
<div class="block" style="height:250px;">
{{#if this.lineChartData}}
<LineChart @data={{this.lineChartData}} @xProp="year" @yProp="value" @chartClass="is-danger">
<LineChart @data={{this.lineChartData}} @xProp="year" @yProp="value">
<:svg as |c|>
<c.Area @data={{this.lineChartData}} />
<c.Area @data={{this.lineChartData}} @colorClass="is-danger" />
</:svg>
</LineChart>
{{/if}}
</div>
<div class="block" style="height:250px;">
{{#if this.lineChartMild}}
<LineChart @data={{this.lineChartMild}} @xProp="year" @yProp="value" @chartClass="is-warning">
<LineChart @data={{this.lineChartMild}} @xProp="year" @yProp="value">
<:svg as |c|>
<c.Area @data={{this.lineChartMild}} />
<c.Area @data={{this.lineChartMild}} @colorClass="is-warning" />
</:svg>
</LineChart>
{{/if}}
@ -106,7 +106,6 @@ export let LiveData = () => {
@xProp="ts"
@yProp="val"
@timeseries={{true}}
@chartClass="is-primary"
@xFormat={{this.controller.secondsFormat}}>
<:svg as |c|>
<c.Area @data={{this.controller.lineChartLive}} />
@ -152,7 +151,7 @@ export let Gaps = () => {
<h5 class="title is-5">Line Chart data with gaps</h5>
<div class="block" style="height:250px">
{{#if this.lineChartGapData}}
<LineChart @data={{this.lineChartGapData}} @xProp="year" @yProp="value" @chartClass="is-primary">
<LineChart @data={{this.lineChartGapData}} @xProp="year" @yProp="value">
<:svg as |c|>
<c.Area @data={{this.lineChartGapData}} />
</:svg>