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 { export default class ChartPrimitiveArea extends Component {
get colorClass() { 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; @uniquely('area-mask') maskId;

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

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

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

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