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/otableData/00table.yml b/_data/components/otableData/00table.yml
index 84638897f..566fae20e 100644
--- a/_data/components/otableData/00table.yml
+++ b/_data/components/otableData/00table.yml
@@ -137,7 +137,10 @@ attributes: [{
required: "",
description: "Indicates whether or not to show the column of checkboxes for selecting table rows in the table"
},{
- name: "orderable"
+ name: "orderable",
+ type: "no | false | yes | true",
+ default: "yes",
+ description: "Indicates whether or not all columns in the table can be sorted"
},{
name: "enabled",
type: "no | false | yes | true",
@@ -151,17 +154,15 @@ attributes: [{
required: "",
description: "Indicates whether or not the table columns are resizables"
},{
- name: "keep-selected-items"
+ name: "keep-selected-items",
+ type: "no | false | yes | true",
+ default: "yes",
+ description: "Indicates whether or not to keep a table row highlighted as selected"
},{
name: "export-service-type",
type: "string",
- description: "The service used by the table for exporting it's data, it must implement 'IExportService' interface. Default: 'OntimizeExportService'"
-},{
- name: "visible-export-dialog-buttons",
- type: "string",
- default: "",
- required: "",
- description: "Visible buttons in export dialog, separated by ';'"
+ default: "OntimizeExportService",
+ description: "The service used by the table for exporting it's data, it must implement 'IExportService' interface"
},{
name: "show-filter-option",
type: "no | false | yes | true",
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/service.yml b/_data/components/service.yml
index 42021a388..fe6bbaf5e 100644
--- a/_data/components/service.yml
+++ b/_data/components/service.yml
@@ -58,7 +58,7 @@ attributes: [{
name: "page-size-options"
},{
name: "quick-filter-appearance",
- type: "legacy | standard | fill | outline",
+ type: "fill | outline",
default : "outline",
required : "",
description : "Indicates which of the mat-form-field different except in o-table component[appearance variants](https://v15.material.angular.io/components/form-field/overview#form-field-appearance-variants) will be used. except in the o-table component."
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;
}
}
```
diff --git a/docs/components/data/34-o-list.component.md b/docs/components/data/34-o-list.component.md
index 8169919dc..205f3ab42 100644
--- a/docs/components/data/34-o-list.component.md
+++ b/docs/components/data/34-o-list.component.md
@@ -39,8 +39,8 @@ The `o-list-item-text` component is used to display list items with a maximum of
edit-button-in-row-icon="edit" detail-mode="none" pagination-controls="false"
page-size-options="5;10" insert-button-position="bottom" show-buttons-text="false">
-
+
@@ -62,8 +62,8 @@ The `o-list-item-avatar` component is used to display list items with an avatar
detail-button-in-row-icon="chevron_right" edit-button-in-row="false"
edit-button-in-row-icon="edit" detail-mode="none">
-
+
@@ -82,7 +82,7 @@ The `o-list-item-card` component is used to display a card list item with text,
[static-data]="data" refresh-button="true" quick-filter="true" insert-button="false"
row-height="medium" detail-mode="none">
-
@@ -103,8 +103,8 @@ The `o-list-item-card-image` component is used to display card list items with a
[static-data]="data" refresh-button="true" insert-button="false"
quick-filter="no" row-height="medium" detail-mode="none">
-
@@ -124,10 +124,10 @@ When building an `o-list` component you can include one of the predefined list i
-

+
- {{ row.name }}
- {{ row.body }}
+ {% raw %}{{ row.name }}{% endraw %}
+ {% raw %}{{ row.body }}{% endraw %}
@@ -141,12 +141,12 @@ The `o-list` component allows to add content in the toolbar with the selector `o
If the selector `o-list-toolbar` is used together with `position='start'` the content will always be placed to the right of the New/Refresh/Delete buttons and if used together with `position='end'` the content will always be placed to the left of the quickfilter
-```ts
-
+```html
+
-
+
-
+
```
diff --git a/docs/components/data/35-o-table-export.component.md b/docs/components/data/35-o-table-export.component.md
index 618fee981..757067310 100644
--- a/docs/components/data/35-o-table-export.component.md
+++ b/docs/components/data/35-o-table-export.component.md
@@ -228,7 +228,7 @@ export const customProviders: any = [
@NgModule({
declarations: [AppComponent],
imports: [
- ONTIMIZE_MODULES,
+ OntimizeWebModule.forRoot(CONFIG),
OntimizeWebModule,
AppRoutingModule,
HttpClientModule,
@@ -422,7 +422,7 @@ export const customProviders: any = [
@NgModule({
declarations: [AppComponent],
imports: [
- ONTIMIZE_MODULES,
+ OntimizeWebModule.forRoot(CONFIG),
OntimizeWebModule,
AppRoutingModule,
HttpClientModule,
@@ -530,7 +530,7 @@ export const customProviders: any = [
@NgModule({
declarations: [AppComponent],
imports: [
- ONTIMIZE_MODULES,
+ OntimizeWebModule.forRoot(CONFIG),
OntimizeWebModule,
AppRoutingModule,
HttpClientModule,
@@ -660,7 +660,7 @@ export const customProviders: any = [
@NgModule({
declarations: [AppComponent],
imports: [
- ONTIMIZE_MODULES,
+ OntimizeWebModule.forRoot(CONFIG),
OntimizeWebModule,
AppRoutingModule,
HttpClientModule,
diff --git a/docs/guide/10-structure.md b/docs/guide/10-structure.md
index 018fbfdc5..539a5d163 100644
--- a/docs/guide/10-structure.md
+++ b/docs/guide/10-structure.md
@@ -215,7 +215,7 @@ export class AppModule { }
The `NgModule` decorator uses the following metadata:
-* **imports:** An array of modules that you want to use in your application. `ONTIMIZE_MODULES` includes standard Angular Modules (`HttpLoader`, `Http` and `TranslateHttpLoader`).
+* **imports:** An array of modules that you want to use in your application.
* **declarations:** Specifies a list of directives/pipes that belong to this module.
* **boostrap:** Defines the components that should be bootstrapped when this module is bootstrapped.
* **providers:** Define the set of injectable objects that are available in the injector of this module. You will include here all the services that you want to make available module-wide. Use the variable `customProviders` for including your application providers.
diff --git a/docs/guide/17-add-to-project.md b/docs/guide/17-add-to-project.md
index 3c6de735f..008443fcc 100644
--- a/docs/guide/17-add-to-project.md
+++ b/docs/guide/17-add-to-project.md
@@ -48,16 +48,16 @@ export const CONFIG: Config = {
And include this configuration in the providers in the application module.
-Include the `OntimizeWebModule`, `ONTIMIZE_MODULES` and `ONTIMIZE_PROVIDERS` in your application module.
+Include the `OntimizeWebModule`, `OntimizeWebModule.forRoot(CONFIG)` and `ONTIMIZE_PROVIDERS` in your application module.
```typescript
-import { APP_CONFIG, ONTIMIZE_MODULES, ONTIMIZE_PROVIDERS, OntimizeWebModule } from 'ontimize-web-ngx';
+import { APP_CONFIG, ONTIMIZE_PROVIDERS, OntimizeWebModule } from 'ontimize-web-ngx';
import { CONFIG } from './app.config';
@NgModule({
...
- imports: [ ONTIMIZE_MODULES, OntimizeWebModule ],
+ imports: [ OntimizeWebModule.forRoot(CONFIG), OntimizeWebModule ],
providers: [
{ provide: APP_CONFIG, useValue: CONFIG },
...ONTIMIZE_PROVIDERS