diff --git a/_data/components/discretebarchart.yml b/_data/components/discretebarchart.yml index ab350f987..8fe3bfe16 100644 --- a/_data/components/discretebarchart.yml +++ b/_data/components/discretebarchart.yml @@ -1,73 +1,138 @@ -directive : "o-chart" +directive: "o-chart" chart: true apiTitle: "OChartComponent" -inheritedAttributes: [{ - component: "OChartComponent", - path: "addons/charts/overview/api", - attributes: ["chart-height", "chart-width", "type", "x-axis", "y-axis", "x-label", "y-label", "x-data-type", "y-data-type", "data", "chart-parameters"] -}] +inheritedAttributes: + [ + { + component: "OChartComponent", + path: "addons/charts/overview/api", + attributes: + [ + "chart-height", + "chart-width", + "type", + "x-axis", + "y-axis", + "x-label", + "y-label", + "x-data-type", + "y-data-type", + "data", + "chart-parameters", + "show-legend", + "legend-position", + "legend-title", + "show-grid-lines", + "color", + "show-tooltip", + "show-data-label", + "show-x-axis", + "show-y-axis", + "show-x-axis-label", + "show-y-axis-label", + "x-formatting", + "y-formatting", + "auto-scale", + "gradient", + "active-entries", + "custom-colors", + ], + }, + ] -attributes: [ -{ - name: "showValues", - description: "Type of chart", - type: "boolean", - default: "true" -},{ - name: "duration", - description: "Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.", - type: "number", - default: 500 -},{ - name: "showLegend", - description: "Show or not legend", - type: "boolean", - default: "false" -},{ - name: "staggerLabels", - description: "Makes the X labels stagger at different distances from the axis so they're less likely to overlap.", - type: "boolean", - default: false -},{ - name: "rotateLabels", - description: "Rotates the X axis labels by the specified degree.", - type: "number", - default: 0 -},{ - name: "wrapLabels", - description: "Splits long X labels by new lines in order to prevent overlapping.", - type: "boolean", - default: "true" -},{ - name: "showXAxis", - description: "Display or hide the X axis", - type: "boolean", - default: "true" -},{ - name: "showYAxis", - description: "Display or hide the Y axis", - type: "boolean", - default: "true" -},{ - name: "rightAlignYAxis", - description: "When only one Y axis is used, this puts the Y axis on the right side instead of the left.", - type: "boolean", - default: "false" -},{ - name: "margin", - description: "Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.", - type: "object", - default: "" -},{ - name: "agroup", - type: "boolean", - default: false -}] +attributes: + [ + { + name: "scheme-type", + description: "Defines the color scale type used by the chart. Allowed values are 'ordinal' and 'linear'.", + type: "string", + default: "ordinal", + }, + { + name: "animations", + description: "Enables or disables chart animations.", + type: "boolean", + default: true, + }, + { + name: "round-domains", + description: "Rounds axis domains to align grid lines evenly.", + type: "boolean", + default: false, + }, + { + name: "trim-x-axis-ticks", + description: "Controls whether X axis tick labels are trimmed when exceeding the maximum length.", + type: "boolean", + default: true, + }, + { + name: "trim-y-axis-ticks", + description: "Controls whether Y axis tick labels are trimmed when exceeding the maximum length.", + type: "boolean", + default: true, + }, + { + name: "rotate-x-axis-ticks", + description: "Enables automatic rotation of X axis tick labels to prevent overlapping.", + type: "boolean", + default: true, + }, + { + name: "max-x-axis-tick-length", + description: "Maximum length of X axis tick labels when trimming is enabled.", + type: "number", + default: 16, + }, + { + name: "max-y-axis-tick-length", + description: "Maximum length of Y axis tick labels when trimming is enabled.", + type: "number", + default: 16, + }, + { + name: "wrap-ticks", + description: "Allows axis tick labels to wrap into multiple lines based on available space.", + type: "boolean", + default: false, + }, + { + name: "no-bar-when-zero", + description: "Prevents rendering bars when their value is zero.", + type: "boolean", + default: true, + }, + { + name: "round-edges", + description: "Renders bars with rounded edges.", + type: "boolean", + default: true, + }, + { + name: "bar-padding", + description: "Defines the spacing in pixels between bars.", + type: "number", + default: 8, + }, + { + name: "y-scale-min", + description: "Defines the minimum value of the Y axis.", + type: "number", + }, + { + name: "y-scale-max", + description: "Defines the maximum value of the Y axis.", + type: "number", + }, + ] -inheritedOutputs: [{ - component: "ChartComponent", - path: "charts/overview", - outputs: ["onDoubleTap", "onPinch", "onPress", "onRotate", "onSwipe", "onTap"] -}] +inheritedOutputs: + [ + { + component: "ChartComponent", + path: "addons/charts/overview/api", + outputs: ["onSelect", "onActivate", "onDeactivate", "onDataLoaded"], + }, + ] diff --git a/_data/components/donutchart.yml b/_data/components/donutchart.yml index ca81e7abd..807e5db3b 100644 --- a/_data/components/donutchart.yml +++ b/_data/components/donutchart.yml @@ -1,93 +1,97 @@ -directive : "o-chart" +directive: "o-chart" chart: true apiTitle: "OChartComponent" -inheritedAttributes: [{ - component: "OChartComponent", - path: "addons/charts/overview/api", - attributes: ["chart-height", "chart-width", "type", "x-axis", "y-axis", "x-label", "y-label", "x-data-type", "y-data-type", "data", "chart-parameters"] -}] +inheritedAttributes: + [ + { + component: "OChartComponent", + path: "addons/charts/overview/api", + attributes: + [ + "chart-height", + "chart-width", + "type", + "x-axis", + "y-axis", + "x-label", + "y-label", + "x-data-type", + "y-data-type", + "data", + "chart-parameters", + "show-legend", + "legend-position", + "legend-title", + "show-grid-lines", + "color", + "show-tooltip", + "show-data-label", + "show-x-axis", + "show-y-axis", + "show-x-axis-label", + "show-y-axis-label", + "x-formatting", + "y-formatting", + "auto-scale", + "gradient", + "active-entries", + "custom-colors" + ], + }, + ] -attributes: [{ - name: "showLegend", - description: "Whether to display the legend or not", - type: "boolean", - default: "true" -},{ - name: "legendPosition", - description: "Position of the legend (top, right, bottom)", - type: "string", - default: "top" -},{ - name: "duration", - description: "Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.", - type: "number", - default: 500 -},{ - name: "donutRatio", - description: "Percent of pie radius to cut out of the middle to make the donut. It is multiplied by the outer radius to calculate the inner radius, thus it should be between 0 and 1.", - type: "number", - default: 0.35 -},{ - name: "cornerRadius", - description: "Corner radius of donut slices", - type: "number", - default: 0 -},{ - name: "showLabels", - description: "Display donut labels", - type: "boolean", - default: "true" -},{ - name: "labelType", - description: "Type of data shown in the label (key, value, percent)", - type: "string", - default: 0 -},{ - name: "labelThreshold", - description: "Configure the minimum slice size for labels to show up", - type: "number", - default: 0.01 -},{ - name: "labelSunbeamLayout", - description: "Enable or disable Sunbeam layout for labels", - type: "boolean", - default: "true" -},{ - name: "labelsOutside", - description: "Whether donut chart labels should be outside the slices instead of inside them", - type: "boolean", - default: "false" -},{ - name: "color", - description: "Colors to use for the different data.", - type: "string[]" -},{ - name: "valueType", - description: "Formats value(s)", - type: "string" -},{ - name: "showTooltip", - description: "Enable or disable the tooltip", - type: "boolean", - default: true -},{ - name: "startAngle", - description: "Function used to manage the starting angle of the donut chart", - type: "function" -},{ - name: "endAngle", - description: "Function used to manage the ending angle of the donut chart", - type: "function" -},{ - name: "colorData", - description: "List of colors for each value in the Y axis of the chart", - type: "OColorData[] = { value: string, color: string }" -}] +attributes: + [ + { + name: "show-labels", + description: "Controls whether labels are displayed on chart slices.", + type: "boolean", + default: false, + }, + { + name: "label-formatting", + description: "Defines a formatting function used to customize the text displayed in slice labels.", + type: "function", + }, + { + name: "trim-labels", + description: "Controls whether slice labels are trimmed when they exceed the maximum label length.", + type: "boolean", + default: true, + }, + { + name: "max-label-length", + description: "Maximum length of slice labels when label trimming is enabled.", + type: "number", + default: 10, + }, + { + name: "explode-slices", + description: "Separates slices from the center to visually emphasize them.", + type: "boolean", + default: false, + }, + { + name: "donut", + description: "Renders the pie chart as a donut chart.", + type: "boolean", + default: false, + }, + { + name: "donut-ratio", + description: "Defines the inner radius ratio of the donut chart. Equivalent to arcWidth.", + type: "number", + default: 0, + }, + ] -inheritedOutputs: [{ - component: "ChartComponent", - path: "charts/overview", - outputs: ["onDoubleTap", "onPinch", "onPress", "onRotate", "onSwipe", "onTap"] -}] +inheritedOutputs: + [ + { + component: "ChartComponent", + path: "addons/charts/overview/api", + outputs: ["onSelect", "onActivate", "onDeactivate", "onDataLoaded"], + }, + ] diff --git a/_data/components/linechart.yml b/_data/components/linechart.yml index 72d22d2a3..60b0ae029 100644 --- a/_data/components/linechart.yml +++ b/_data/components/linechart.yml @@ -3,45 +3,150 @@ chart: true apiTitle: "OChartComponent" -inheritedAttributes: [{ - component: "OChartComponent", - path: "addons/charts/overview/api", - attributes: ["chart-height", "chart-width", "type", "x-axis", "y-axis", "x-label", "y-label", "x-data-type", "y-data-type", "data", "chart-parameters"] -}] +inheritedAttributes: + [ + { + component: "OChartComponent", + path: "addons/charts/overview/api", + attributes: + [ + "chart-height", + "chart-width", + "type", + "x-axis", + "y-axis", + "x-label", + "y-label", + "x-data-type", + "y-data-type", + "data", + "chart-parameters", + "show-legend", + "legend-position", + "legend-title", + "show-grid-lines", + "color", + "show-tooltip", + "show-data-label", + "show-x-axis", + "show-y-axis", + "show-x-axis-label", + "show-y-axis-label", + "x-formatting", + "y-formatting", + "auto-scale", + "gradient", + "active-entries", + "custom-colors", + ], + }, + ] -attributes: [{ - name: "showLegend", - description: "Whether to display the legend or not", - type: "boolean", - default: "true" -},{ - name: "legendPosition", - description: "Position of the legend (right, below)", - type: "string", - default: "top" -},{ - name: "color", - description: "Colors to use for the different data.", - type: "array" -},{ - name: "showXAxis", - description: "Show or not X Axis", - type: "boolean", - default: "true" -},{ - name: "showYAxis", - description: "Show or not Y Axis", - type: "boolean", - default: "true" -},{ - name: "autoScale", - description: "Set the minimum value of the y axis to the minimum value in the data", - type: "boolean", - default: "false" -}] - -inheritedOutputs: [{ - component: "ChartComponent", - path: "addons/charts/overview/api", - outputs: ["onSelect", "onActivate", "onDeactivate", "onDataLoaded"] -}] \ No newline at end of file +attributes: + [ + { + name: "scheme-type", + description: "Defines the color scale type used by the chart. Allowed values are 'ordinal' and 'linear'.", + type: "string", + default: "ordinal", + }, + { + name: "range-fill-opacity", + description: "Opacity of the shaded area used to represent minimum and maximum range values.", + type: "number", + default: 0.15, + }, + { + name: "round-domains", + description: "Rounds axis domains to align grid lines evenly.", + type: "boolean", + default: false, + }, + { + name: "timeline", + description: "Displays a timeline control below the chart. Only available for linear or time scales.", + type: "boolean", + default: false, + }, + { + name: "reference-lines", + description: "Defines reference lines to be displayed behind the chart. Each line must have the format { name, value }.", + type: "array", + }, + { + name: "show-ref-lines", + description: "Controls whether reference lines are displayed on the chart.", + type: "boolean", + default: false, + }, + { + name: "show-ref-labels", + description: "Controls whether reference line labels are displayed.", + type: "boolean", + default: true, + }, + { + name: "x-scale-min", + description: "Defines the minimum value of the X axis when using linear or time scales.", + type: "any", + }, + { + name: "x-scale-max", + description: "Defines the maximum value of the X axis when using linear or time scales.", + type: "any", + }, + { + name: "y-scale-min", + description: "Defines the minimum value of the Y axis.", + type: "number", + }, + { + name: "y-scale-max", + description: "Defines the maximum value of the Y axis.", + type: "number", + }, + { + name: "trim-x-axis-ticks", + description: "Controls whether X axis tick labels are trimmed when exceeding the maximum length.", + type: "boolean", + default: true, + }, + { + name: "trim-y-axis-ticks", + description: "Controls whether Y axis tick labels are trimmed when exceeding the maximum length.", + type: "boolean", + default: true, + }, + { + name: "rotate-x-axis-ticks", + description: "Enables automatic rotation of X axis tick labels to prevent overlapping.", + type: "boolean", + default: true, + }, + { + name: "max-x-axis-tick-length", + description: "Maximum length of X axis tick labels when trimming is enabled.", + type: "number", + default: 16, + }, + { + name: "max-y-axis-tick-length", + description: "Maximum length of Y axis tick labels when trimming is enabled.", + type: "number", + default: 16, + }, + { + name: "wrap-ticks", + description: "Allows axis tick labels to wrap into multiple lines based on available space.", + type: "boolean", + default: false, + }, + ] +inheritedOutputs: + [ + { + component: "ChartComponent", + path: "addons/charts/overview/api", + outputs: ["onSelect", "onActivate", "onDeactivate", "onDataLoaded"], + }, + ] diff --git a/_data/components/multibarchart.yml b/_data/components/multibarchart.yml index 2c8d1125b..8fe3bfe16 100644 --- a/_data/components/multibarchart.yml +++ b/_data/components/multibarchart.yml @@ -1,84 +1,138 @@ -directive : "o-chart" +directive: "o-chart" chart: true apiTitle: "OChartComponent" -inheritedAttributes: [{ - component: "OChartComponent", - path: "addons/charts/overview/api", - attributes: ["chart-height", "chart-width", "type", "x-axis", "y-axis", "x-label", "y-label", "x-data-type", "y-data-type", "data", "chart-parameters"] -}] +inheritedAttributes: + [ + { + component: "OChartComponent", + path: "addons/charts/overview/api", + attributes: + [ + "chart-height", + "chart-width", + "type", + "x-axis", + "y-axis", + "x-label", + "y-label", + "x-data-type", + "y-data-type", + "data", + "chart-parameters", + "show-legend", + "legend-position", + "legend-title", + "show-grid-lines", + "color", + "show-tooltip", + "show-data-label", + "show-x-axis", + "show-y-axis", + "show-x-axis-label", + "show-y-axis-label", + "x-formatting", + "y-formatting", + "auto-scale", + "gradient", + "active-entries", + "custom-colors", + ], + }, + ] -attributes: [{ - name: "margin", - description: "Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.", - type: "object" -},{ - name: "showLegend", - description: "Whether to display the legend or not", - type: "boolean", - default: "true" -},{ - name: "duration", - description: "Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.", - type: "number", - default: 500 -},{ - name: "stacked", - type: "boolean", - default: true -},{ - name: "hideable", - type: "boolean", - default: "false" -},{ - name: "groupSpacing", - description: "The padding between bar groups, this is passed as the padding attribute of rangeBands", - type: "number", - default: 0.1 -},{ - name: "reduceXTicks", - type: "boolean", - default: true -},{ - name: "showControls", - description: "Whether to show extra controls or not. Extra controls include things like making mulitBar charts stacked or side by side.", - type: "boolean", - default: "true" -},{ - name: "rotateLabels", - description: "Rotates the X axis labels by the specified degree.", - type: "number", - default: 0 -},{ - name: "wrapLabels", - description: "Splits long X labels by new lines in order to prevent overlapping.", - type: "boolean", - default: false -},{ - name: "showXAxis", - description: "Display or hide the X axis", - type: "boolean", - default: true -},{ - name: "showYAxis", - description: "Display or hide the Y axis", - type: "boolean", - default: true -},{ - name: "rightAlignYAxis", - description: "When only one Y axis is used, this puts the Y axis on the right side instead of the left.", - type: "boolean", - default: false -},{ - name: "color", - description: "Colors to use for the different data. If an array is given, it is converted to a function automatically.", - type: "array", - default: false -}] +attributes: + [ + { + name: "scheme-type", + description: "Defines the color scale type used by the chart. Allowed values are 'ordinal' and 'linear'.", + type: "string", + default: "ordinal", + }, + { + name: "animations", + description: "Enables or disables chart animations.", + type: "boolean", + default: true, + }, + { + name: "round-domains", + description: "Rounds axis domains to align grid lines evenly.", + type: "boolean", + default: false, + }, + { + name: "trim-x-axis-ticks", + description: "Controls whether X axis tick labels are trimmed when exceeding the maximum length.", + type: "boolean", + default: true, + }, + { + name: "trim-y-axis-ticks", + description: "Controls whether Y axis tick labels are trimmed when exceeding the maximum length.", + type: "boolean", + default: true, + }, + { + name: "rotate-x-axis-ticks", + description: "Enables automatic rotation of X axis tick labels to prevent overlapping.", + type: "boolean", + default: true, + }, + { + name: "max-x-axis-tick-length", + description: "Maximum length of X axis tick labels when trimming is enabled.", + type: "number", + default: 16, + }, + { + name: "max-y-axis-tick-length", + description: "Maximum length of Y axis tick labels when trimming is enabled.", + type: "number", + default: 16, + }, + { + name: "wrap-ticks", + description: "Allows axis tick labels to wrap into multiple lines based on available space.", + type: "boolean", + default: false, + }, + { + name: "no-bar-when-zero", + description: "Prevents rendering bars when their value is zero.", + type: "boolean", + default: true, + }, + { + name: "round-edges", + description: "Renders bars with rounded edges.", + type: "boolean", + default: true, + }, + { + name: "bar-padding", + description: "Defines the spacing in pixels between bars.", + type: "number", + default: 8, + }, + { + name: "y-scale-min", + description: "Defines the minimum value of the Y axis.", + type: "number", + }, + { + name: "y-scale-max", + description: "Defines the maximum value of the Y axis.", + type: "number", + }, + ] -inheritedOutputs: [{ - component: "ChartComponent", - path: "addons/charts/overview/api", - outputs: ["onDoubleTap", "onPinch", "onPress", "onRotate", "onSwipe", "onTap"] -}] +inheritedOutputs: + [ + { + component: "ChartComponent", + path: "addons/charts/overview/api", + outputs: ["onSelect", "onActivate", "onDeactivate", "onDataLoaded"], + }, + ] diff --git a/_data/components/multibarhorizontalchart.yml b/_data/components/multibarhorizontalchart.yml index 2c8d1125b..f9fc5d58b 100644 --- a/_data/components/multibarhorizontalchart.yml +++ b/_data/components/multibarhorizontalchart.yml @@ -1,84 +1,137 @@ -directive : "o-chart" +directive: "o-chart" chart: true apiTitle: "OChartComponent" -inheritedAttributes: [{ - component: "OChartComponent", - path: "addons/charts/overview/api", - attributes: ["chart-height", "chart-width", "type", "x-axis", "y-axis", "x-label", "y-label", "x-data-type", "y-data-type", "data", "chart-parameters"] -}] +inheritedAttributes: + [ + { + path: "addons/charts/overview/api", + attributes: + [ + "chart-height", + "chart-width", + "type", + "x-axis", + "y-axis", + "x-label", + "y-label", + "x-data-type", + "y-data-type", + "data", + "chart-parameters", + "show-legend", + "legend-position", + "legend-title", + "show-grid-lines", + "color", + "show-tooltip", + "show-data-label", + "show-x-axis", + "show-y-axis", + "show-x-axis-label", + "show-y-axis-label", + "x-formatting", + "y-formatting", + "auto-scale", + "gradient", + "active-entries", + "custom-colors", + ], + }, + ] -attributes: [{ - name: "margin", - description: "Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.", - type: "object" -},{ - name: "showLegend", - description: "Whether to display the legend or not", - type: "boolean", - default: "true" -},{ - name: "duration", - description: "Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.", - type: "number", - default: 500 -},{ - name: "stacked", - type: "boolean", - default: true -},{ - name: "hideable", - type: "boolean", - default: "false" -},{ - name: "groupSpacing", - description: "The padding between bar groups, this is passed as the padding attribute of rangeBands", - type: "number", - default: 0.1 -},{ - name: "reduceXTicks", - type: "boolean", - default: true -},{ - name: "showControls", - description: "Whether to show extra controls or not. Extra controls include things like making mulitBar charts stacked or side by side.", - type: "boolean", - default: "true" -},{ - name: "rotateLabels", - description: "Rotates the X axis labels by the specified degree.", - type: "number", - default: 0 -},{ - name: "wrapLabels", - description: "Splits long X labels by new lines in order to prevent overlapping.", - type: "boolean", - default: false -},{ - name: "showXAxis", - description: "Display or hide the X axis", - type: "boolean", - default: true -},{ - name: "showYAxis", - description: "Display or hide the Y axis", - type: "boolean", - default: true -},{ - name: "rightAlignYAxis", - description: "When only one Y axis is used, this puts the Y axis on the right side instead of the left.", - type: "boolean", - default: false -},{ - name: "color", - description: "Colors to use for the different data. If an array is given, it is converted to a function automatically.", - type: "array", - default: false -}] +attributes: + [ + { + name: "scheme-type", + description: "Defines the color scale type used by the chart. Allowed values are 'ordinal' and 'linear'.", + type: "string", + default: "ordinal", + }, + { + name: "animations", + description: "Enables or disables chart animations.", + type: "boolean", + default: true, + }, + { + name: "round-domains", + description: "Rounds axis domains to align grid lines evenly.", + type: "boolean", + default: false, + }, + { + name: "trim-x-axis-ticks", + description: "Controls whether X axis tick labels are trimmed when exceeding the maximum length.", + type: "boolean", + default: true, + }, + { + name: "trim-y-axis-ticks", + description: "Controls whether Y axis tick labels are trimmed when exceeding the maximum length.", + type: "boolean", + default: true, + }, + { + name: "rotate-x-axis-ticks", + description: "Enables automatic rotation of X axis tick labels to prevent overlapping.", + type: "boolean", + default: true, + }, + { + name: "max-x-axis-tick-length", + description: "Maximum length of X axis tick labels when trimming is enabled.", + type: "number", + default: 16, + }, + { + name: "max-y-axis-tick-length", + description: "Maximum length of Y axis tick labels when trimming is enabled.", + type: "number", + default: 16, + }, + { + name: "wrap-ticks", + description: "Allows axis tick labels to wrap into multiple lines based on available space.", + type: "boolean", + default: false, + }, + { + name: "no-bar-when-zero", + description: "Prevents rendering bars when their value is zero.", + type: "boolean", + default: true, + }, + { + name: "round-edges", + description: "Renders bars with rounded edges.", + type: "boolean", + default: true, + }, + { + name: "bar-padding", + description: "Defines the spacing in pixels between bars.", + type: "number", + default: 8, + }, + { + name: "y-scale-min", + description: "Defines the minimum value of the Y axis.", + type: "number", + }, + { + name: "y-scale-max", + description: "Defines the maximum value of the Y axis.", + type: "number", + }, + ] -inheritedOutputs: [{ - component: "ChartComponent", - path: "addons/charts/overview/api", - outputs: ["onDoubleTap", "onPinch", "onPress", "onRotate", "onSwipe", "onTap"] -}] +inheritedOutputs: + [ + { + component: "ChartComponent", + path: "addons/charts/overview/api", + outputs: ["onSelect", "onActivate", "onDeactivate", "onDataLoaded"], + }, + ] \ No newline at end of file diff --git a/_data/components/overviewchart.yml b/_data/components/overviewchart.yml index 5cf40ef63..0c210a4e5 100644 --- a/_data/components/overviewchart.yml +++ b/_data/components/overviewchart.yml @@ -18,7 +18,7 @@ attributes: [{ type: "number" },{ name: "type", - description: "Defines the type of graph to be painted (bubbleChart, bulletChart, candlestickBarChart, discreteBar, donutChart, forceDirectedGraph, gaugeDashboardChart, gaugeSimpleChart, gaugeSlimChart, gaugeSpaceChart, line, linePlusBarWithFocusChart, multiBar, multiBarHorizontalChart, ohlcBarChart, parallelCoordinatesChart, pie, radarChart, radialPercentChart, scatterChart, stackedAreaChart)", + description: "Defines the type of graph to be painted (discreteBar, donutChart, line, multiBar, multiBarHorizontalChart, pie, stackedAreaChart)", type: "string" },{ name: "x-axis", @@ -72,6 +72,78 @@ attributes: [{ type: "boolean", default: false }, +{ + name: "color", + description: "Modifies the color palette of the chart. Accepts an object in the format { domain: ['#xxxx', '#xxxx', '#xxxx'] } or a theme name ('vivid', 'natural', 'cool', 'fire', 'solar', 'air', 'aqua', 'flame', 'ocean', 'forest', 'horizon', 'neons', 'picnic', 'night', 'nightLights')", + type: "object|string" +}, +{ + name: "show-tooltip", + description: "Controls whether the tooltip is displayed when hovering chart elements.", + type: "boolean" +},{ + name: "show-data-label", + description: "Controls whether data labels are displayed directly on chart elements.", + type: "boolean" +},{ + name: "show-x-axis", + description: "Controls whether the X axis is displayed.", + type: "boolean", + default: true +},{ + name: "show-y-axis", + description: "Controls whether the Y axis is displayed.", + type: "boolean", + default: true +},{ + name: "show-x-axis-label", + description: "Controls whether the X axis label is displayed.", + type: "boolean", + default: true +},{ + name: "show-y-axis-label", + description: "Controls whether the Y axis label is displayed.", + type: "boolean", + default: true +},{ + name: "x-formatting", + description: "Defines a formatting function or configuration for X axis values.", + type: "any" +},{ + name: "y-formatting", + description: "Defines a formatting function or configuration for Y axis values.", + type: "any" +},{ + name: "auto-scale", + description: "Automatically sets the minimum Y axis value to the minimum value in the data instead of zero.", + type: "boolean" +},{ + name: "gradient", + description: "Enables gradient fill instead of solid colors for chart elements.", + type: "boolean" +},{ + name: "active-entries", + description: "Defines the chart elements that should be displayed as active or highlighted.", + type: "array" +},{ + name: "custom-colors", + description: "Defines custom colors to override the default color scheme for specific values or series.", + type: "any" +},{ + name: "legend-position", + description: "Allows modifying the position of the legend. Values can be 'right' or 'below'.", + type: "string" +},{ + name: "legend-title", + description: "Title to be displayed on the legend.", + type: "string" +}, +{ + name: "show-grid-lines", + description: "Controls whether the grid lines are displayed on the chart.", + type: "boolean", + default: false +}, { name: "color", description: "Modifies the color palette of the chart. Accepts an object in the format { domain: ['#xxxx', '#xxxx', '#xxxx'] } or a theme name ('vivid', 'natural', 'cool', 'fire', 'solar', 'air', 'aqua', 'flame', 'ocean', 'forest', 'horizon', 'neons', 'picnic', 'night', 'nightLights')", diff --git a/_data/components/piechart.yml b/_data/components/piechart.yml index 8cb5c4cbb..807e5db3b 100644 --- a/_data/components/piechart.yml +++ b/_data/components/piechart.yml @@ -1,80 +1,97 @@ -directive : "o-chart" +directive: "o-chart" chart: true apiTitle: "OChartComponent" -inheritedAttributes: [{ - component: "OChartComponent", - path: "addons/charts/overview/api", - attributes: ["chart-height", "chart-width", "type", "x-axis", "y-axis", "x-label", "y-label", "x-data-type", "y-data-type", "data", "chart-parameters"] -}] +inheritedAttributes: + [ + { + component: "OChartComponent", + path: "addons/charts/overview/api", + attributes: + [ + "chart-height", + "chart-width", + "type", + "x-axis", + "y-axis", + "x-label", + "y-label", + "x-data-type", + "y-data-type", + "data", + "chart-parameters", + "show-legend", + "legend-position", + "legend-title", + "show-grid-lines", + "color", + "show-tooltip", + "show-data-label", + "show-x-axis", + "show-y-axis", + "show-x-axis-label", + "show-y-axis-label", + "x-formatting", + "y-formatting", + "auto-scale", + "gradient", + "active-entries", + "custom-colors" + ], + }, + ] -attributes: [{ - name: "showLegend", - description: "Whether to display the legend or not", - type: "boolean", - default: "true" -},{ - name: "legendPosition", - description: "Position of the legend (top, right, bottom)", - type: "string", - default: "top" -},{ - name: "duration", - description: "Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.", - type: "number", - default: 500 -},{ - name: "cornerRadius", - description: "Corner radius of the slices", - type: "number", - default: 0 -},{ - name: "showLabels", - description: "Specifies if labels are displayed", - type: "boolean", - default: "true" -},{ - name: "labelType", - description: "Type of data shown in the label (key, value, percent)", - type: "string", - default: 0 -},{ - name: "labelThreshold", - description: "Configure the minimum slice size for labels to show up", - type: "number", - default: 0.01 -},{ - name: "labelSunbeamLayout", - description: "", - type: "boolean", - default: "true" -},{ - name: "labelsOutside", - description: "Whether pie chart labels should be outside the slices instead of inside them", - type: "boolean", - default: "false" -},{ - name: "color", - description: "Colors to use for the different data.", - type: "string[]" -},{ - name: "valueType", - description: "Formats value(s)", - type: "string" -},{ - name: "showTooltip", - description: "Enables or disabled the tooltip", - type: "boolean", - default: true -},{ - name: "colorData", - description: "List of colors for each value in the Y axis of the chart", - type: "OColorData[] = { value: string, color: string }" -}] +attributes: + [ + { + name: "show-labels", + description: "Controls whether labels are displayed on chart slices.", + type: "boolean", + default: false, + }, + { + name: "label-formatting", + description: "Defines a formatting function used to customize the text displayed in slice labels.", + type: "function", + }, + { + name: "trim-labels", + description: "Controls whether slice labels are trimmed when they exceed the maximum label length.", + type: "boolean", + default: true, + }, + { + name: "max-label-length", + description: "Maximum length of slice labels when label trimming is enabled.", + type: "number", + default: 10, + }, + { + name: "explode-slices", + description: "Separates slices from the center to visually emphasize them.", + type: "boolean", + default: false, + }, + { + name: "donut", + description: "Renders the pie chart as a donut chart.", + type: "boolean", + default: false, + }, + { + name: "donut-ratio", + description: "Defines the inner radius ratio of the donut chart. Equivalent to arcWidth.", + type: "number", + default: 0, + }, + ] -inheritedOutputs: [{ - component: "ChartComponent", - path: "addons/charts/overview/api", - outputs: ["onDoubleTap", "onPinch", "onPress", "onRotate", "onSwipe", "onTap"] -}] +inheritedOutputs: + [ + { + component: "ChartComponent", + path: "addons/charts/overview/api", + outputs: ["onSelect", "onActivate", "onDeactivate", "onDataLoaded"], + }, + ] diff --git a/_data/components/stackedareachart.yml b/_data/components/stackedareachart.yml index 2c8d1125b..a50c40c76 100644 --- a/_data/components/stackedareachart.yml +++ b/_data/components/stackedareachart.yml @@ -1,84 +1,153 @@ -directive : "o-chart" +directive: "o-chart" chart: true apiTitle: "OChartComponent" -inheritedAttributes: [{ - component: "OChartComponent", - path: "addons/charts/overview/api", - attributes: ["chart-height", "chart-width", "type", "x-axis", "y-axis", "x-label", "y-label", "x-data-type", "y-data-type", "data", "chart-parameters"] -}] +inheritedAttributes: + [ + { + component: "OChartComponent", + path: "addons/charts/overview/api", + attributes: + [ + "chart-height", + "chart-width", + "type", + "x-axis", + "y-axis", + "x-label", + "y-label", + "x-data-type", + "y-data-type", + "data", + "chart-parameters", + "show-legend", + "legend-position", + "legend-title", + "show-grid-lines", + "color", + "show-tooltip", + "show-data-label", + "show-x-axis", + "show-y-axis", + "show-x-axis-label", + "show-y-axis-label", + "x-formatting", + "y-formatting", + "auto-scale", + "gradient", + "active-entries", + "custom-colors", + ], + }, + ] -attributes: [{ - name: "margin", - description: "Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.", - type: "object" -},{ - name: "showLegend", - description: "Whether to display the legend or not", - type: "boolean", - default: "true" -},{ - name: "duration", - description: "Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.", - type: "number", - default: 500 -},{ - name: "stacked", - type: "boolean", - default: true -},{ - name: "hideable", - type: "boolean", - default: "false" -},{ - name: "groupSpacing", - description: "The padding between bar groups, this is passed as the padding attribute of rangeBands", - type: "number", - default: 0.1 -},{ - name: "reduceXTicks", - type: "boolean", - default: true -},{ - name: "showControls", - description: "Whether to show extra controls or not. Extra controls include things like making mulitBar charts stacked or side by side.", - type: "boolean", - default: "true" -},{ - name: "rotateLabels", - description: "Rotates the X axis labels by the specified degree.", - type: "number", - default: 0 -},{ - name: "wrapLabels", - description: "Splits long X labels by new lines in order to prevent overlapping.", - type: "boolean", - default: false -},{ - name: "showXAxis", - description: "Display or hide the X axis", - type: "boolean", - default: true -},{ - name: "showYAxis", - description: "Display or hide the Y axis", - type: "boolean", - default: true -},{ - name: "rightAlignYAxis", - description: "When only one Y axis is used, this puts the Y axis on the right side instead of the left.", - type: "boolean", - default: false -},{ - name: "color", - description: "Colors to use for the different data. If an array is given, it is converted to a function automatically.", - type: "array", - default: false -}] +attributes: + [ + { + name: "scheme-type", + description: "Defines the color scale type used by the chart. Allowed values are 'ordinal' and 'linear'.", + type: "string", + default: "ordinal", + }, + { + name: "range-fill-opacity", + description: "Opacity of the shaded area used to represent minimum and maximum range values.", + type: "number", + default: 0.15, + }, + { + name: "round-domains", + description: "Rounds axis domains to align grid lines evenly.", + type: "boolean", + default: false, + }, + { + name: "timeline", + description: "Displays a timeline control below the chart. Only available for linear or time scales.", + type: "boolean", + default: false, + }, + { + name: "reference-lines", + description: "Defines reference lines to be displayed behind the chart. Each line must have the format { name, value }.", + type: "array", + }, + { + name: "show-ref-lines", + description: "Controls whether reference lines are displayed on the chart.", + type: "boolean", + default: false, + }, + { + name: "show-ref-labels", + description: "Controls whether reference line labels are displayed.", + type: "boolean", + default: true, + }, + { + name: "x-scale-min", + description: "Defines the minimum value of the X axis when using linear or time scales.", + type: "any", + }, + { + name: "x-scale-max", + description: "Defines the maximum value of the X axis when using linear or time scales.", + type: "any", + }, + { + name: "y-scale-min", + description: "Defines the minimum value of the Y axis.", + type: "number", + }, + { + name: "y-scale-max", + description: "Defines the maximum value of the Y axis.", + type: "number", + }, + { + name: "trim-x-axis-ticks", + description: "Controls whether X axis tick labels are trimmed when exceeding the maximum length.", + type: "boolean", + default: true, + }, + { + name: "trim-y-axis-ticks", + description: "Controls whether Y axis tick labels are trimmed when exceeding the maximum length.", + type: "boolean", + default: true, + }, + { + name: "rotate-x-axis-ticks", + description: "Enables automatic rotation of X axis tick labels to prevent overlapping.", + type: "boolean", + default: true, + }, + { + name: "max-x-axis-tick-length", + description: "Maximum length of X axis tick labels when trimming is enabled.", + type: "number", + default: 16, + }, + { + name: "max-y-axis-tick-length", + description: "Maximum length of Y axis tick labels when trimming is enabled.", + type: "number", + default: 16, + }, + { + name: "wrap-ticks", + description: "Allows axis tick labels to wrap into multiple lines based on available space.", + type: "boolean", + default: false, + }, + ] -inheritedOutputs: [{ - component: "ChartComponent", - path: "addons/charts/overview/api", - outputs: ["onDoubleTap", "onPinch", "onPress", "onRotate", "onSwipe", "onTap"] -}] +inheritedOutputs: + [ + { + component: "ChartComponent", + path: "addons/charts/overview/api", + outputs: ["onSelect", "onActivate", "onDeactivate", "onDataLoaded"], + }, + ] diff --git a/docs/addons/ontimize_web_ngx_charts/configuration/01-o-linechart.component.md b/docs/addons/ontimize_web_ngx_charts/configuration/01-o-linechart.component.md index 09695e198..e503e2e6a 100644 --- a/docs/addons/ontimize_web_ngx_charts/configuration/01-o-linechart.component.md +++ b/docs/addons/ontimize_web_ngx_charts/configuration/01-o-linechart.component.md @@ -47,9 +47,8 @@ export class LineComponent { constructor() { this.chartParameters = new LineChartConfiguration(); - this.chartParameters.isArea = [true]; - this.chartParameters.interactive = false; - this.chartParameters.useInteractiveGuideline = false; + this.chartParameters.schemeType = 'linear'; + this.chartParameters.gradient = true; } } ``` diff --git a/docs/addons/ontimize_web_ngx_charts/configuration/03-o-piechart.component.md b/docs/addons/ontimize_web_ngx_charts/configuration/03-o-piechart.component.md index fd786793d..acca42ed9 100644 --- a/docs/addons/ontimize_web_ngx_charts/configuration/03-o-piechart.component.md +++ b/docs/addons/ontimize_web_ngx_charts/configuration/03-o-piechart.component.md @@ -51,9 +51,8 @@ export class PieComponent{ constructor() { this.chartParameters = new PieChartConfiguration(); - this.chartParameters.cornerRadius = 20; + this.chartParameters.explodeSlices = true; this.chartParameters.legendPosition = "bottom"; - this.chartParameters.labelType = "value"; } } ``` diff --git a/docs/addons/ontimize_web_ngx_charts/configuration/04-o-donutchart.component.md b/docs/addons/ontimize_web_ngx_charts/configuration/04-o-donutchart.component.md index c615883b9..90017e534 100644 --- a/docs/addons/ontimize_web_ngx_charts/configuration/04-o-donutchart.component.md +++ b/docs/addons/ontimize_web_ngx_charts/configuration/04-o-donutchart.component.md @@ -55,7 +55,6 @@ export class DonutComponent { this.chartParameters = new DonutChartConfiguration(); this.chartParameters.showLabels = false; - this.chartParameters.cornerRadius = 15; this.chartParameters.donutRatio = 0.5; } } diff --git a/docs/addons/ontimize_web_ngx_charts/configuration/07-o-stackedareachart.component.md b/docs/addons/ontimize_web_ngx_charts/configuration/07-o-stackedareachart.component.md index 313bf88b6..693f43247 100644 --- a/docs/addons/ontimize_web_ngx_charts/configuration/07-o-stackedareachart.component.md +++ b/docs/addons/ontimize_web_ngx_charts/configuration/07-o-stackedareachart.component.md @@ -49,8 +49,8 @@ export class StackedAreaComponent { constructor() { this.chartParameters = new StackedAreaChartConfiguration(); this.chartParameters.showLegend = false; - this.chartParameters.interactive = false; - this.chartParameters.useInteractiveGuideline = false; + this.chartParameters.schemeType = 'linear'; + this.chartParameters.gradient = true; } } ``` diff --git a/docs/addons/ontimize_web_ngx_charts/configuration/08-o-multibarhorizontalchart.component.md b/docs/addons/ontimize_web_ngx_charts/configuration/08-o-multibarhorizontalchart.component.md index d6f7d9d17..77b60d539 100644 --- a/docs/addons/ontimize_web_ngx_charts/configuration/08-o-multibarhorizontalchart.component.md +++ b/docs/addons/ontimize_web_ngx_charts/configuration/08-o-multibarhorizontalchart.component.md @@ -44,12 +44,9 @@ import { StackedAreaChartConfiguration } from 'ontimize-web-ngx-charts'; }) export class MultiBarHorizontalComponent { chartParameters: MultiBarHorizontalChartConfiguration; - constructor() { this.chartParameters = new MultiBarHorizontalChartConfiguration(); - this.chartParameters.showLegend = false; - this.chartParameters.interactive = false; - this.chartParameters.useInteractiveGuideline = false; + this.chartParameters.barPadding=28; } } ```