This widget prints out the value transitions of a metric considering the previous 7 days.
Template Syntax
Below you can find some examples of how to use the component within a template.
<yamazumi-chart title="Last 7 days status"
metric="Status">
</yamazumi-chart>
Component Reference
Here is a comprehensive list of all the elements and properties that can be used to configure the component.
Yamazumi Diagram <yamazumi-chart>
Color Filter | The filter function used to draw values using a common color palette. Name: colorFilter Type: FILTER | Optional
|
Colors | The color palette used by the widget (e.g. ['#00a659', '#d3d3d3']) Name: colors Type: JSON | Optional
|
Column Width | The size (from 0 to 1) of the segments within the widget (e.g. 0.5). Name: columnWidth Type: FLOAT | Optional
|
Graph | The JSON describing how the chart should be displayed, for more details see the link:https://docs.amcharts.com/3/javascriptcharts/AmGraph[AmChart - Charts] documentation. Name: graph Type: JSON | Optional
|
Name | The metric whose value(s) must be loaded by the widget. Name: metric Type: METRIC | Required
|
Period | The date and time period filtering data. Name: period Type: STRING | Optional
|
Title | The title displayed on the top part of the widget box. Name: title Type: STRING | Optional
|
Rendering | |
CSS Class | The name(s) of the CSS class used to customize the widget layout. Name: class Type: STRING | Optional
|
Height | The height of the widget (e.g. 250px). Name: height Type: STRING | Optional
|
Visibility Condition | The expression that allows you to reduce the visibility of the element. Name: *ngIf Type: STRING | Optional
|
Width | The width of the widget (e.g. 500px). Name: width Type: STRING | Optional
|