playbook_ui 11.15.0 → 11.16.0.pre.alpha.paginationrails1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (45) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/data/menu.yml +1 -0
  4. data/app/pb_kits/playbook/index.js +2 -2
  5. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +145 -0
  6. data/app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts +2 -0
  7. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +207 -0
  8. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.html.erb +9 -21
  9. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +7 -47
  10. data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts +16 -0
  11. data/app/pb_kits/playbook/pb_dashboard/{pbChartsDarkTheme.js → pbChartsDarkTheme.ts} +6 -21
  12. data/app/pb_kits/playbook/pb_dashboard/{pbChartsLightTheme.js → pbChartsLightTheme.ts} +6 -21
  13. data/app/pb_kits/playbook/pb_dashboard/themeTypes.ts +16 -0
  14. data/app/pb_kits/playbook/pb_gauge/_gauge.scss +4 -0
  15. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +202 -0
  16. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb +1 -1
  17. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +8 -8
  18. data/app/pb_kits/playbook/pb_gauge/gauge.html.erb +1 -11
  19. data/app/pb_kits/playbook/pb_gauge/gauge.rb +3 -8
  20. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +148 -0
  21. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +68 -0
  22. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +41 -0
  23. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +28 -0
  24. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +12 -0
  25. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +9 -0
  26. data/app/pb_kits/playbook/pb_pagination/docs/index.js +1 -0
  27. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +7 -0
  28. data/app/pb_kits/playbook/pb_pagination/pagination.rb +18 -0
  29. data/app/pb_kits/playbook/pb_pagination/pagination.test.jsx +17 -0
  30. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +111 -0
  31. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx +1 -1
  32. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  33. data/app/pb_kits/playbook/playbook-rails-react-bindings.js +4 -0
  34. data/app/pb_kits/playbook/playbook-rails.js +0 -4
  35. data/lib/playbook/kit_base.rb +2 -0
  36. data/lib/playbook/pagination_renderer.rb +41 -0
  37. data/lib/playbook/version.rb +2 -2
  38. data/lib/playbook.rb +1 -0
  39. metadata +38 -12
  40. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +0 -111
  41. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +0 -151
  42. data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +0 -112
  43. data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +0 -113
  44. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx +0 -79
  45. data/app/pb_kits/playbook/plugins/pb_chart.js +0 -322
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: cffd8ae39a8b80f013b9bc0fca179e7cdd94be62b1bfcba8a786984fbe6bb15a
4
- data.tar.gz: 320820bff742b9b95b6d0867f81782eb6d20edee840ca1e65bd9ecc9fc96d805
3
+ metadata.gz: '0794b715e47092c87265d48f3c1f6a09e8050528a5016a6da90fc78d23615402'
4
+ data.tar.gz: 3aafca5ec392f57269699e2ba64db635b53c43c2fa8b3c863bea485b785ec16c
5
5
  SHA512:
6
- metadata.gz: 612b82bdc76521177c494de8203d6a64147a8dc2e6863ad0f28edef9eece3c410236ffa234220ed8c1d0ad69c5b857b8023fa2bf6d0680fec24054f8acd4bbde
7
- data.tar.gz: 24e96215afa640ea123786fb2a3656a91e5bff64e3a49b17598034230949be6b1e6671270cb1dee78edaf3563dee09dd09d5f1a7f6f5c9e1b7ba0c80173f5472
6
+ metadata.gz: cb081f936bc2b88a4b2be6431436d19cf308ddd66c0ca939fb416808dc781b999b9f21f4821e24d9b65a6be6d45187deba28741c9abdc35d44321274b5ba8f56
7
+ data.tar.gz: 6e10b6b6a3ecece6bd0fab27244c49a5261c192afe7f7c41cec7584bef1514979319e23ecde8e2a585b9962e388ec4427dba00f95b9a46db7eeb6c184a8f2826
@@ -103,3 +103,5 @@
103
103
  @import './utilities/line_height';
104
104
  @import './utilities/display';
105
105
  @import './utilities/flexbox';
106
+
107
+ @import 'pb_pagination/pagination';
@@ -104,3 +104,4 @@ kits:
104
104
  - title_detail
105
105
  - user_badge
106
106
  - walkthrough
107
+ - pagination
@@ -53,9 +53,9 @@ export { default as LabelPill } from './pb_label_pill/_label_pill'
53
53
  export { default as LabelValue } from './pb_label_value/_label_value'
54
54
  export { default as Layout } from './pb_layout/_layout'
55
55
  export { default as Legend } from './pb_legend/_legend'
56
+ export { default as Lightbox } from './pb_lightbox/_lightbox'
56
57
  export { default as LineGraph } from './pb_line_graph/_line_graph'
57
58
  export { default as List } from './pb_list/_list'
58
- export { default as Lightbox } from './pb_lightbox/_lightbox'
59
59
  export { default as ListItem } from './pb_list/_list_item'
60
60
  export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
61
61
  export { default as Message } from './pb_message/_message'
@@ -64,6 +64,7 @@ export { default as MultipleUsersStacked } from './pb_multiple_users_stacked/_mu
64
64
  export { default as Nav } from './pb_nav/_nav'
65
65
  export { default as NavItem } from './pb_nav/_item'
66
66
  export { default as OnlineStatus } from './pb_online_status/_online_status'
67
+ export { default as Pagination} from './pb_pagination/_pagination'
67
68
  export { default as Passphrase } from './pb_passphrase/_passphrase'
68
69
  export { default as PbReactPopover } from './pb_popover/_popover'
69
70
  export { default as Person } from './pb_person/_person'
@@ -115,7 +116,6 @@ export { default as barGraphSettings } from './pb_bar_graph/barGraphSettings'
115
116
  export { default as dashboardValueSettings } from './pb_dashboard_value/dashboardValueSettings'
116
117
 
117
118
  // Other JS/Plugins
118
- export { default as pbChart } from './plugins/pb_chart.js'
119
119
  export { default as datePickerHelper } from './pb_date_picker/date_picker_helper'
120
120
  export { default as PbPopover } from './pb_popover'
121
121
  export { default as PbTable } from './pb_table'
@@ -0,0 +1,145 @@
1
+ import React, { useState, useEffect } from "react";
2
+ import { globalProps } from "../utilities/globalProps";
3
+ import { buildAriaProps, buildDataProps } from "../utilities/props";
4
+
5
+ import HighchartsReact from "highcharts-react-official";
6
+ import Highcharts from "highcharts";
7
+ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
8
+ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
9
+ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
10
+
11
+ import classnames from "classnames";
12
+
13
+ type BarGraphProps = {
14
+ align?: "left" | "right" | "center";
15
+ axisTitle: string;
16
+ dark?: Boolean;
17
+ xAxisCategories: [];
18
+ yAxisMin: number;
19
+ yAxisMax: number;
20
+ chartData: { name: string; data: number[] }[];
21
+ className?: string;
22
+ id: any;
23
+ pointStart: number | any;
24
+ subTitle?: string;
25
+ title: string;
26
+ type?: string;
27
+ legend?: boolean;
28
+ toggleLegendClick?: boolean;
29
+ height?: string;
30
+ colors: string[];
31
+ layout?: "horizontal" | "vertical" | "proximate";
32
+ verticalAlign?: "top" | "middle" | "bottom";
33
+ x?: number;
34
+ y?: number;
35
+ aria?: { [key: string]: string };
36
+ data?: { [key: string]: string };
37
+ };
38
+
39
+
40
+ const BarGraph = ({
41
+ aria = {},
42
+ data = {},
43
+ align = "center",
44
+ axisTitle,
45
+ dark = false,
46
+ chartData,
47
+ className = "pb_bar_graph",
48
+ colors,
49
+ id,
50
+ pointStart,
51
+ subTitle,
52
+ type = "column",
53
+ title = "Title",
54
+ xAxisCategories,
55
+ yAxisMin,
56
+ yAxisMax,
57
+ legend = false,
58
+ toggleLegendClick = true,
59
+ height,
60
+ layout = "horizontal",
61
+ verticalAlign = "bottom",
62
+ x = 0,
63
+ y = 0,
64
+ ...props
65
+ }: BarGraphProps) => {
66
+ const ariaProps = buildAriaProps(aria);
67
+ const dataProps = buildDataProps(data);
68
+ const setupTheme = () => {
69
+ dark
70
+ ? Highcharts.setOptions(highchartsDarkTheme)
71
+ : Highcharts.setOptions(highchartsTheme);
72
+ };
73
+ setupTheme();
74
+
75
+ const staticOptions = {
76
+ title: {
77
+ text: title,
78
+ },
79
+ chart: {
80
+ height: height,
81
+ type: type,
82
+ },
83
+ subtitle: {
84
+ text: subTitle,
85
+ },
86
+ yAxis: {
87
+ min: yAxisMin,
88
+ max: yAxisMax,
89
+ title: {
90
+ text: axisTitle,
91
+ },
92
+ },
93
+ xAxis: {
94
+ categories: xAxisCategories,
95
+ },
96
+ legend: {
97
+ enabled: legend,
98
+ align: align,
99
+ verticalAlign: verticalAlign,
100
+ layout: layout,
101
+ x: x,
102
+ y: y,
103
+ },
104
+ colors:
105
+ colors !== undefined && colors.length > 0
106
+ ? mapColors(colors)
107
+ : highchartsTheme.colors,
108
+ plotOptions: {
109
+ series: {
110
+ pointStart: pointStart,
111
+ events: {},
112
+ dataLabels: {
113
+ enabled: false,
114
+ },
115
+ },
116
+ },
117
+ series: chartData,
118
+ credits: false,
119
+ };
120
+
121
+ if (!toggleLegendClick) {
122
+ staticOptions.plotOptions.series.events = { legendItemClick: () => false };
123
+ }
124
+
125
+ const [options, setOptions] = useState({});
126
+
127
+ useEffect(() => {
128
+ setOptions({ ...staticOptions });
129
+ }, [chartData]);
130
+
131
+ return (
132
+ <HighchartsReact
133
+ containerProps={{
134
+ className: classnames(globalProps(props), className),
135
+ id: id,
136
+ ...ariaProps,
137
+ ...dataProps,
138
+ }}
139
+ highcharts={Highcharts}
140
+ options={options}
141
+ />
142
+ );
143
+ };
144
+
145
+ export default BarGraph;
@@ -0,0 +1,2 @@
1
+ declare module "*.scss"
2
+ declare module "highcharts-react-official"
@@ -0,0 +1,207 @@
1
+ import React, { useEffect, useState } from "react";
2
+ import classnames from "classnames";
3
+ import HighchartsReact from "highcharts-react-official";
4
+ import highchartsMore from "highcharts/highcharts-more";
5
+
6
+ import Highcharts from "highcharts";
7
+
8
+ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
9
+ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
10
+ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
11
+ import { globalProps } from "../utilities/globalProps";
12
+ import { buildAriaProps, buildDataProps } from "../utilities/props";
13
+
14
+ type CircleChartProps = {
15
+ align?: "left" | "right" | "center";
16
+ aria: { [key: string]: string };
17
+ chartData?: [];
18
+ children?: Node;
19
+ className?: string;
20
+ colors?: string[];
21
+ dark?: Boolean;
22
+ data?: Object;
23
+ dataLabelHtml?: string;
24
+ dataLabels?: boolean;
25
+ height?: string;
26
+ id?: string;
27
+ innerSize?: "sm" | "md" | "lg" | "none";
28
+ legend?: boolean;
29
+ maxPointSize?: number;
30
+ minPointSize?: number;
31
+ rounded?: boolean;
32
+ startAngle?: number;
33
+ style?: string;
34
+ title?: string;
35
+ useHtml?: boolean;
36
+ zMin?: number;
37
+ layout?: "horizontal" | "vertical" | "proximate";
38
+ verticalAlign?: "top" | "middle" | "bottom";
39
+ x?: number;
40
+ y?: number;
41
+ borderColor?: string;
42
+ borderWidth?: number;
43
+ };
44
+
45
+ // Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
46
+ const alignBlockElement = (event: any) => {
47
+ const itemToMove = document.querySelector(
48
+ `#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`
49
+ ) as HTMLElement;
50
+ const chartContainer = document.querySelector(`#${event.target.renderTo.id}`);
51
+ if (itemToMove !== null) {
52
+ itemToMove.style.height = `${event.target.chartHeight}px`;
53
+ itemToMove.style.width = `${event.target.chartWidth}px`;
54
+ chartContainer.firstChild.before(itemToMove);
55
+ }
56
+ };
57
+
58
+ const CircleChart = ({
59
+ align = "center",
60
+ aria = {},
61
+ rounded = false,
62
+ borderColor = rounded ? null : "",
63
+ borderWidth = rounded ? 20 : null,
64
+ chartData,
65
+ children,
66
+ className,
67
+ colors = [],
68
+ dark = false,
69
+ data = {},
70
+ dataLabelHtml = "<div>{point.name}</div>",
71
+ dataLabels = false,
72
+ height,
73
+ id,
74
+ innerSize = "md",
75
+ legend = false,
76
+ maxPointSize = null,
77
+ minPointSize = null,
78
+ startAngle = null,
79
+ style = "pie",
80
+ title,
81
+ useHtml = false,
82
+ zMin = null,
83
+ layout = "horizontal",
84
+ verticalAlign = "bottom",
85
+ x = 0,
86
+ y = 0,
87
+ ...props
88
+ }: CircleChartProps) => {
89
+ const ariaProps = buildAriaProps(aria);
90
+ const dataProps = buildDataProps(data);
91
+ highchartsMore(Highcharts);
92
+
93
+ const setupTheme = () => {
94
+ dark
95
+ ? Highcharts.setOptions(highchartsDarkTheme)
96
+ : Highcharts.setOptions(highchartsTheme);
97
+ };
98
+ setupTheme();
99
+
100
+ Highcharts.setOptions({
101
+ tooltip: {
102
+ headerFormat: null,
103
+ pointFormat:
104
+ '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
105
+ "<b>{point.y}</b>",
106
+ useHTML: useHtml,
107
+ },
108
+ });
109
+
110
+ const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
111
+ const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
112
+ innerSizes[size];
113
+
114
+
115
+ const [options, setOptions] = useState({});
116
+
117
+ useEffect(() => {
118
+ const formattedChartData = chartData.map((obj: any) => {
119
+ obj.y = obj.value;
120
+ delete obj.value;
121
+ return obj;
122
+ });
123
+
124
+ const staticOptions = {
125
+ title: {
126
+ text: title,
127
+ },
128
+ chart: {
129
+ height: height,
130
+ type: style,
131
+ events: {
132
+ render: (event: any) => alignBlockElement(event),
133
+ redraw: (event: any) => alignBlockElement(event),
134
+ },
135
+ },
136
+
137
+ legend: {
138
+ align: align,
139
+ verticalAlign: verticalAlign,
140
+ layout: layout,
141
+ x: x,
142
+ y: y,
143
+ },
144
+ plotOptions: {
145
+ pie: {
146
+ colors:
147
+ colors.length > 0 ? mapColors(colors) : highchartsTheme.colors,
148
+ dataLabels: {
149
+ enabled: dataLabels,
150
+ connectorShape: "straight",
151
+ connectorWidth: 3,
152
+ format: dataLabelHtml,
153
+ },
154
+ showInLegend: legend,
155
+ },
156
+ },
157
+ series: [
158
+ {
159
+ minPointSize: minPointSize,
160
+ maxPointSize: maxPointSize,
161
+ innerSize: borderWidth == 20 ? "100%" : innerSizeFormat(innerSize),
162
+ data: formattedChartData,
163
+ zMin: zMin,
164
+ startAngle: startAngle,
165
+ borderWidth: borderWidth,
166
+ borderColor: borderColor,
167
+ },
168
+ ],
169
+ credits: false,
170
+ };
171
+ setOptions({ ...staticOptions });
172
+ }, [chartData]);
173
+
174
+
175
+ return (
176
+ <>
177
+ {children ? (
178
+ <div id={`wrapper-circle-chart-${id}`}>
179
+ <HighchartsReact
180
+ containerProps={{
181
+ className: classnames("pb_circle_chart", globalProps(props)),
182
+ id: id,
183
+ ...ariaProps,
184
+ ...dataProps,
185
+ }}
186
+ highcharts={Highcharts}
187
+ options={options}
188
+ />
189
+ <div className="pb-circle-chart-block">{children}</div>
190
+ </div>
191
+ ) : (
192
+ <HighchartsReact
193
+ containerProps={{
194
+ className: classnames("pb_circle_chart", globalProps(props)),
195
+ id: id,
196
+ ...ariaProps,
197
+ ...dataProps,
198
+ }}
199
+ highcharts={Highcharts}
200
+ options={options}
201
+ />
202
+ )}
203
+ </>
204
+ );
205
+ };
206
+
207
+ export default CircleChart;
@@ -1,22 +1,10 @@
1
- <div id="wrapper-circle-chart-<%= object.id %>">
2
- <%= content_tag(:div, "",
3
- aria: object.aria,
4
- id: object.id,
5
- data: object.data,
6
- class: object.classname) do %>
7
- <% content_for :pb_js do %>
8
- <%= javascript_tag do %>
9
- window.addEventListener('DOMContentLoaded', function() {
10
- new pbChart('.selector', <%= object.chart_options %>)
11
-
12
- });
13
- <% end %>
14
- <% end %>
15
- <% end %>
16
-
17
- <% if content.present? %>
18
- <div class="pb-circle-chart-block">
19
- <%= content %>
1
+ <% if content.present? %>
2
+ <div id=wrapper-circle-chart-<%= object.id %> >
3
+ <%= react_component('CircleChart', object.chart_options) %>
4
+ <div class="pb-circle-chart-block">
5
+ <%= content %>
6
+ </div>
20
7
  </div>
21
- <% end %>
22
- </div>
8
+ <% else %>
9
+ <%= react_component('CircleChart', object.chart_options) %>
10
+ <% end %>
@@ -1,7 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
- # rubocop:disable Style/HashLikeCase
4
-
5
3
  module Playbook
6
4
  module PbCircleChart
7
5
  class CircleChart < Playbook::KitBase
@@ -13,7 +11,6 @@ module Playbook
13
11
  prop :style, type: Playbook::Props::Enum,
14
12
  values: %w[pie],
15
13
  default: "pie"
16
-
17
14
  prop :data_labels, type: Playbook::Props::Boolean, default: false
18
15
  prop :min_point_size, type: Playbook::Props::Numeric
19
16
  prop :max_point_size, type: Playbook::Props::Numeric
@@ -22,11 +19,8 @@ module Playbook
22
19
  default: "md"
23
20
  prop :z_min, type: Playbook::Props::Numeric
24
21
  prop :start_angle, type: Playbook::Props::Numeric
25
- prop :header_format
26
22
  prop :data_label_html, default: "<div>{point.name}</div>"
27
- prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
28
- {point.name}: ' + '<b>{point.y}
29
- </b>'
23
+ prop :tooltip_html
30
24
  prop :use_html, type: Playbook::Props::Boolean, default: false
31
25
  prop :legend, type: Playbook::Props::Boolean, default: false
32
26
  prop :title, default: ""
@@ -43,64 +37,32 @@ module Playbook
43
37
  prop :x, type: Playbook::Props::Numeric
44
38
  prop :y, type: Playbook::Props::Numeric
45
39
 
46
- def chart_type
47
- style == "variablepie" ? "variablepie" : "pie"
48
- end
49
-
50
- def chart_data_formatted
51
- chart_data.map { |hash| hash[:y] = hash.delete :value }
52
- chart_data
53
- end
54
-
55
- def inner_size_format
56
- case inner_size
57
- when "lg"
58
- "85%"
59
- when "sm"
60
- "35%"
61
- when "none"
62
- "0%"
63
- when "md"
64
- "50%"
65
- end
66
- end
67
-
68
- def rounded_border_width
69
- rounded ? 20 : nil
70
- end
71
-
72
- def rounded_border_color
73
- rounded == true ? "null" : nil
74
- end
75
-
76
40
  def chart_options
77
41
  {
78
42
  align: align,
79
43
  id: id,
80
44
  colors: colors,
81
- borderColor: rounded_border_color,
82
- borderWidth: rounded_border_width,
83
- chartData: chart_data_formatted,
45
+ chartData: chart_data,
84
46
  dark: dark ? "dark" : "",
85
47
  title: title,
86
48
  height: height,
87
- type: chart_type,
88
- showInLegend: legend,
49
+ type: style,
50
+ legend: legend,
89
51
  dataLabelHtml: data_label_html,
90
52
  dataLabels: data_labels,
91
- headerFormat: header_format,
92
53
  tooltipHtml: tooltip_html,
93
54
  useHTML: use_html,
94
55
  minPointSize: min_point_size,
95
56
  maxPointSize: max_point_size,
96
- innerSize: inner_size_format,
57
+ innerSize: inner_size,
97
58
  zMin: z_min,
98
59
  startAngle: start_angle,
60
+ rounded: rounded,
99
61
  layout: layout,
100
62
  verticalAlign: vertical_align,
101
63
  x: x,
102
64
  y: y,
103
- }.to_json.html_safe
65
+ }
104
66
  end
105
67
 
106
68
  def classname
@@ -109,5 +71,3 @@ module Playbook
109
71
  end
110
72
  end
111
73
  end
112
-
113
- # rubocop:enable Style/HashLikeCase
@@ -0,0 +1,16 @@
1
+ import colors from "../tokens/exports/_colors.scss";
2
+
3
+
4
+ // Map Data Color String Props to our SCSS Variables
5
+ const mapColors = (array: string[]) => {
6
+ const regex = /(data)\-[1-8]/; //eslint-disable-line
7
+
8
+ const newArray = array.map((item) => {
9
+ return regex.test(item)
10
+ ? `${colors[`data_${item[item.length - 1]}`]}`
11
+ : item;
12
+ });
13
+ return newArray;
14
+ };
15
+
16
+ export default mapColors
@@ -1,9 +1,11 @@
1
1
  import colors from '../tokens/exports/_colors.scss'
2
2
  import typography from '../tokens/exports/_typography.scss'
3
3
 
4
+ import { ThemeProps } from './themeTypes'
5
+
4
6
  import Highcharts from 'highcharts'
5
7
 
6
- const highchartsDarkTheme = {
8
+ const highchartsDarkTheme: ThemeProps = {
7
9
  lang: {
8
10
  thousandsSep: ',',
9
11
  },
@@ -150,26 +152,6 @@ const highchartsDarkTheme = {
150
152
  },
151
153
  threshold: null,
152
154
  },
153
-
154
- // GAUGE STYLES
155
- solidgauge: {
156
- borderColor: colors.primary,
157
- borderWidth: 20,
158
- radius: 90,
159
- innerRadius: '90%',
160
- dataLabels: {
161
- borderWidth: 0,
162
- color: colors.text_dk_default,
163
- enabled: true,
164
- style: {
165
- fontFamily: typography.font_family_base,
166
- fontWeight: typography.regular,
167
- fontSize: typography.heading_2,
168
- },
169
- y: -26,
170
- },
171
- },
172
-
173
155
  // PIE STYLES
174
156
  pie: {
175
157
  colors: [
@@ -247,6 +229,9 @@ const highchartsDarkTheme = {
247
229
  }
248
230
  },
249
231
  },
232
+ credits: {
233
+ enabled: false
234
+ },
250
235
  }
251
236
 
252
237
  export { highchartsDarkTheme }
@@ -1,9 +1,11 @@
1
1
  import colors from '../tokens/exports/_colors.scss'
2
2
  import typography from '../tokens/exports/_typography.scss'
3
3
 
4
+ import { ThemeProps } from './themeTypes'
5
+
4
6
  import Highcharts from 'highcharts'
5
7
 
6
- const highchartsTheme = {
8
+ const highchartsTheme: ThemeProps = {
7
9
  lang: {
8
10
  thousandsSep: ',',
9
11
  },
@@ -150,26 +152,6 @@ const highchartsTheme = {
150
152
  },
151
153
  threshold: null,
152
154
  },
153
-
154
- // GAUGE STYLES
155
- solidgauge: {
156
- borderColor: colors.primary,
157
- borderWidth: 20,
158
- radius: 90,
159
- innerRadius: '90%',
160
- dataLabels: {
161
- borderWidth: 0,
162
- color: colors.text_lt_default,
163
- enabled: true,
164
- style: {
165
- fontFamily: typography.font_family_base,
166
- fontWeight: typography.regular,
167
- fontSize: typography.heading_2,
168
- },
169
- y: -26,
170
- },
171
- },
172
-
173
155
  // PIE STYLES
174
156
  pie: {
175
157
  colors: [
@@ -247,6 +229,9 @@ const highchartsTheme = {
247
229
  }
248
230
  },
249
231
  },
232
+ credits: {
233
+ enabled: false
234
+ },
250
235
  }
251
236
 
252
237
  export { highchartsTheme }
@@ -0,0 +1,16 @@
1
+ export type ThemeProps = {
2
+ lang?: {[key: string]: string}
3
+ credits?: {[key: string]: boolean}
4
+ colors?: string[]
5
+ chart?: {[key: string]: any}
6
+ title?: {[key: string]: string | {}}
7
+ subtitle?: {[key: string]: string | {};}
8
+ xAxis?: {[key: string]: any;}
9
+ yAxis?: {[key: string]: any;}
10
+ legend?: {[key: string]: string | {};}
11
+ labels?: {[key: string]: {};}
12
+ tooltip?: {[key: string]: any;}
13
+ pane?: {[key: string]: {};}
14
+ plotOptions?: {[key: string]: any;}
15
+ colorKey?: string
16
+ }
@@ -12,4 +12,8 @@
12
12
  rect.highcharts-background {
13
13
  fill: #0000 !important;
14
14
  }
15
+
16
+ .gauge-pane {
17
+ stroke-linejoin: round;
18
+ }
15
19
  }