refactor(charts): remove width and height

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-theme.scss

@@ -18,6 +18,7 @@
 /// @param {Color} $title-text-color [null] - Sets the color of the chart title.
 /// @param {String} $title-text-style [null] - Sets the CSS font property of the chart title.
 /// @param {List} $subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle.
+/// @param {String} $subtitle-alignment [null] - The horizontal alignment to use for the subtitle.
 /// @param {Color} $subtitle-text-color [null] - Sets the color of the chart subtitle.
 /// @param {String} $subtitle-text-style [null] - Sets the CSS font property of the chart subtitle.
 /// @param {Number} $thickness [null] - Sets the thickness for all series in a chart.
@@ -207,6 +208,7 @@
             title-alignment: $title-alignment,
             title-text-color: $title-text-color,
             title-text-style: $title-text-style,
+            subtitle-alignment: $subtitle-alignment,
             subtitle-text-color: $subtitle-text-color,
             subtitle-text-style: $subtitle-text-style,
             thickness: $thickness,

projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-theme.scss

@@ -6,8 +6,6 @@
 
 /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
-/// @param {Map} $width [null] - The width of the chart.
-/// @param {Map} $height [null] - The height of the chart.
 /// @param {List} $margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
 /// @param {Color} $title-text-color [null] - Sets the color of the chart title.
 /// @param {List} $title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title.
@@ -32,8 +30,6 @@
     $palette: $default-palette,
     $schema: $light-schema,
 
-    $width: null,
-    $height: null,
     $margin: null,
     $title-text-color: null,
     $title-margin: null,
@@ -85,8 +81,6 @@
         $subtitle-margin,
         (
             name: $name,
-            width: $width,
-            height: $height,
             title-text-color: $title-text-color,
             subtitle-text-color: null,
             brushes: $brushes,

projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-theme.scss

@@ -6,8 +6,6 @@
 
 /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
-/// @param {Number} $width [null] - The width of the chart.
-/// @param {Number} $height [null] - The height of the chart.
 /// @param {List} $margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
 /// @param {String} $title-alignment [null] - The horizontal alignment to use for the title.
 /// @param {Color} $title-text-color [null] - Sets the color of the chart title.
@@ -79,8 +77,6 @@
     $palette: $default-palette,
     $schema: $light-schema,
 
-    $width: null,
-    $height: null,
     $margin: null,
     $title-alignment: null,
     $title-text-color: null,
@@ -201,8 +197,6 @@
         $y-axis-title-margin,
         (
             name: $name,
-            width: $width,
-            height: $height,
             margin: $margin,
             title-alignment: $title-alignment,
             title-text-color: $title-text-color,

projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-theme.scss

@@ -7,8 +7,6 @@
 /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
 ///
-/// @param {Number} $width [null] - The width of the chart.
-/// @param {Number} $height [null]  - The height of the chart.
 /// @param {List} $brushes [null] - Defines the palette from which automatically assigned series colors are selected.
 /// @param {List} $outlines [null] - Defines the palette from which automatically assigned series outline colors are selected.
 /// @param {String} $outer-label-alignment [null] - Sets which side of the chart the outer labels should appear.
@@ -31,9 +29,7 @@
     $schema: $light-schema,
 
     $brushes: null,
-    $height: null,
     $outlines: null,
-    $width: null,
     $outer-label-alignment: null,
     $outer-label-text-color: null,
     $outer-label-visibility: null,
@@ -53,8 +49,6 @@
 
     @return extend($theme, (
         name: $name,
-        width: $width,
-        height: $height,
         brushes: $brushes,
         outlines: $outlines,
         outer-label-alignment: $outer-label-alignment,

projects/igniteui-angular/src/lib/core/styles/components/charts/_pie-chart-theme.scss

@@ -6,8 +6,6 @@
 
 /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
-/// @param {Map} $width [null] - Sets the width of the chart.
-/// @param {Map} $height [null] - Sets the height of the chart.
 /// @param {List} $brushes [series] - Defines the palette from which automatically assigned series colors are selected.
 /// @param {List} $outlines [series] - Defines the palette from which automatically assigned series outline colors are selected.
 /// @param {Number} $label-extent [null] - Sets the pixel amount by which the labels are offset from the edge of the slices.
@@ -31,8 +29,6 @@
     $palette: $default-palette,
     $schema: $light-schema,
 
-    $width: null,
-    $height: null,
     $brushes: null,
     $outlines: null,
     $label-extent: null,
@@ -57,8 +53,6 @@
 
     @return extend( $theme, (
         name: $name,
-        width: $width,
-        height: $height,
         brushes: $brushes,
         outlines: $outlines,
         label-extent: $label-extent,
@@ -72,5 +66,3 @@
     ));
 }
 
-// @mixin igx-pie-chart-typography($type-scale, $categories: ()) {};
-

projects/igniteui-angular/src/lib/core/styles/components/charts/_shape-chart-theme.scss

@@ -6,8 +6,6 @@
 
 /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
-/// @param {Map} $width [null] - The width of the chart.
-/// @param {Map} $height [null] - The height of the chart.
 /// @param {List} $margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
 /// @param {Color} $title-alignment [null] - Sets horizontal alignment which determines the title position, relative to the left and right edges of the control.
 /// @param {Color} $title-text-color [null] - Sets the color of the chart title.
@@ -60,8 +58,6 @@
 @function igx-shape-chart-theme(
     $palette: $default-palette,
     $schema: $light-schema,
-    $width: null,
-    $height: null,
     $margin: null,
     $title-text-color: null,
     $title-margin: null,
@@ -172,8 +168,6 @@
         $y-axis-title-margin,
         (
             name: $name,
-            width: $width,
-            height: $height,
             title-text-color: $title-text-color,
             subtitle-text-color: $subtitle-text-color,
             brushes: $brushes,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_category-chart.scss

@@ -20,6 +20,7 @@
 /// @property {Color} title-text-color [null] - Sets the color of the chart title.
 /// @property {String} title-text-style [null] - Sets the CSS font property of the chart title.
 /// @property {List} subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle.
+/// @property {String} subtitle-alignment [null] - The horizontal alignment to use for the subtitle.
 /// @property {Color} subtitle-text-color [null] - Sets the color of the chart subtitle.
 /// @property {String} subtitle-text-style [null] - Sets the CSS font property of the chart subtitle.
 /// @property {Number} thickness [null] - Sets the thickness for all series in a chart.
@@ -99,6 +100,8 @@ $_light-category-chart: extend(
             map-keys-prefix: 'subtitle'
         ),
 
+        'subtitle-alignment': null,
+
         'subtitle-text-color': (
             igx-color: ('grays', 700),
             hexrgba: #fff

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_data-chart.scss

@@ -8,8 +8,6 @@
 
 /// Generates a light base data chart schema.
 /// @type {Map}
-/// @property {Map} width [null] - The width of the chart.
-/// @property {Map} height [null] - The height of the chart.
 /// @property {List} margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
 /// @property {Color} title-text-color [igx-color: ('grays', 900)] - Sets the color of the chart title.
 /// @property {List} title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title.
@@ -24,10 +22,6 @@
 /// @see $default-palette
 $_light-data-chart: extend(
     (
-        'width': null,
-
-        'height': null,
-
         'margin': null,
 
         'title-text-color': (
@@ -54,7 +48,7 @@ $_light-data-chart: extend(
             igx-color: ('surface', 500)
         ),
 
-        'title-horizontal-alignment': null
+        'title-horizontal-alignment': null,
     )
 );
 

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_financial-chart.scss

@@ -8,8 +8,6 @@
 
 /// Generates a light base chart schema.
 /// @type {Map}
-/// @prop {Number} width [null] - The width of the chart.
-/// @prop {Number} height [null] - The height of the chart.
 /// @prop {List} margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
 /// @prop {String} title-alignment [null] - The horizontal alignment to use for the title.
 /// @prop {Color} title-text-color [null] - Sets the color of the chart title.
@@ -71,8 +69,6 @@
 /// @see $default-palette
 $_light-financial-chart: extend(
     (
-        'width': null,
-        'height': null,
         'margin': null,
         'title-alignment': null,
         'title-text-color': null,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_funnel-chart.scss

@@ -8,8 +8,6 @@
 
 /// Generates a light funnel chart schema.
 /// @type {Map}
-/// @property {Number} width [null]  - The width of the chart.
-/// @property {Number} height [null]  - The height of the chart.
 /// @property {List} brushes [series] - Defines the palette from which automatically assigned series colors are selected.
 /// @property {List} outlines [series] - Defines the palette from which automatically assigned series outline colors are selected.
 /// @property {String} outer-label-alignment [null] - Sets which side of the chart the outer labels should appear.
@@ -23,26 +21,14 @@
 /// @see $default-palette
 $_light-funnel-chart: extend(
     (
-        'width': null,
-
-        'height': null,
-
         'brushes': series,
-
         'outlines': series,
-
         'outer-label-alignment': null,
-
         'outer-label-text-color': null,
-
         'outer-label-text-style': null,
-
         'outer-label-visibility': null,
-
         'outline-thickness': null,
-
         'text-color': null,
-
         'text-style': null,
     )
 );