@apexcura/ui-components 0.0.14-Beta184 → 0.0.14-Beta186

package/dist/index.d.mts

@@ -132,7 +132,7 @@ declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
 
 declare const LineChart: (props: ElementType) => React$1.JSX.Element;
 
-declare function HighchartsLineChart(): React$1.JSX.Element;
+declare const HighchartsLineChart: (props: any) => React$1.JSX.Element;
 
 declare const DoubleBarChart: (props: ElementType) => React$1.JSX.Element;
 

package/dist/index.d.ts

@@ -132,7 +132,7 @@ declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
 
 declare const LineChart: (props: ElementType) => React$1.JSX.Element;
 
-declare function HighchartsLineChart(): React$1.JSX.Element;
+declare const HighchartsLineChart: (props: any) => React$1.JSX.Element;
 
 declare const DoubleBarChart: (props: ElementType) => React$1.JSX.Element;
 

package/dist/index.js

@@ -41,7 +41,7 @@ __export(src_exports, {
   DoubleBarChart: () => DoubleBarChart,
   DropDownGroup: () => DropDownGroup,
   FileUpload: () => FileUpload,
-  HighchartsLineChart: () => highchart_default,
+  HighchartsLineChart: () => HighchartsLineChart,
   HorizontalBarChart: () => HorizontalBarChart,
   Image: () => Image,
   LineChart: () => LineChart,
@@ -1385,10 +1385,137 @@ var LineChart = (props) => {
 
 // src/Components/highchart.tsx
 var import_react35 = __toESM(require("react"));
-function HighchartsLineChart() {
-  return /* @__PURE__ */ import_react35.default.createElement("h1", null, "123456789");
-}
-var highchart_default = HighchartsLineChart;
+var import_highcharts = __toESM(require("highcharts"));
+var import_highcharts_react_official = __toESM(require("highcharts-react-official"));
+var HighchartsLineChart = (props) => {
+  let graph_data = {
+    chart: {
+      height: "50%"
+    },
+    title: {
+      text: "U.S Solar Employment Growth",
+      align: "left"
+    },
+    subtitle: {
+      text: 'By Job Category. Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>.',
+      align: "left"
+    },
+    yAxis: {
+      title: {
+        text: "Number of Employees"
+      }
+    },
+    xAxis: {
+      accessibility: {
+        rangeDescription: "Range: 2010 to 2020"
+      }
+    },
+    legend: {
+      layout: "vertical",
+      align: "right",
+      verticalAlign: "middle"
+    },
+    plotOptions: {
+      series: {
+        label: {
+          connectorAllowed: false
+        },
+        pointStart: 2010
+      }
+    },
+    series: [{
+      name: "Installation & Developers",
+      data: [
+        43934,
+        48656,
+        65165,
+        81827,
+        112143,
+        142383,
+        171533,
+        165174,
+        155157,
+        161454,
+        154610
+      ]
+    }, {
+      name: "Manufacturing",
+      data: [
+        24916,
+        37941,
+        29742,
+        29851,
+        32490,
+        30282,
+        38121,
+        36885,
+        33726,
+        34243,
+        31050
+      ]
+    }, {
+      name: "Sales & Distribution",
+      data: [
+        11744,
+        3e4,
+        16005,
+        19771,
+        20185,
+        24377,
+        32147,
+        30912,
+        29243,
+        29213,
+        25663
+      ]
+    }, {
+      name: "Operations & Maintenance",
+      data: [
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        11164,
+        11218,
+        10077
+      ]
+    }, {
+      name: "Other",
+      data: [
+        21908,
+        5548,
+        8105,
+        11248,
+        8989,
+        11816,
+        18274,
+        17300,
+        13053,
+        11906,
+        10073
+      ]
+    }],
+    responsive: {
+      rules: [{
+        condition: {
+          maxWidth: 500
+        },
+        chartOptions: {
+          legend: {
+            layout: "horizontal",
+            align: "center",
+            verticalAlign: "bottom"
+          }
+        }
+      }]
+    }
+  };
+  return /* @__PURE__ */ import_react35.default.createElement("div", null, /* @__PURE__ */ import_react35.default.createElement(import_highcharts_react_official.default, { highcharts: import_highcharts.default, options: graph_data }));
+};
 
 // src/Components/DoubleBarChart.tsx
 var import_react36 = __toESM(require("react"));

package/dist/index.mjs

@@ -1336,10 +1336,137 @@ var LineChart = (props) => {
 
 // src/Components/highchart.tsx
 import React35 from "react";
-function HighchartsLineChart() {
-  return /* @__PURE__ */ React35.createElement("h1", null, "123456789");
-}
-var highchart_default = HighchartsLineChart;
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+var HighchartsLineChart = (props) => {
+  let graph_data = {
+    chart: {
+      height: "50%"
+    },
+    title: {
+      text: "U.S Solar Employment Growth",
+      align: "left"
+    },
+    subtitle: {
+      text: 'By Job Category. Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>.',
+      align: "left"
+    },
+    yAxis: {
+      title: {
+        text: "Number of Employees"
+      }
+    },
+    xAxis: {
+      accessibility: {
+        rangeDescription: "Range: 2010 to 2020"
+      }
+    },
+    legend: {
+      layout: "vertical",
+      align: "right",
+      verticalAlign: "middle"
+    },
+    plotOptions: {
+      series: {
+        label: {
+          connectorAllowed: false
+        },
+        pointStart: 2010
+      }
+    },
+    series: [{
+      name: "Installation & Developers",
+      data: [
+        43934,
+        48656,
+        65165,
+        81827,
+        112143,
+        142383,
+        171533,
+        165174,
+        155157,
+        161454,
+        154610
+      ]
+    }, {
+      name: "Manufacturing",
+      data: [
+        24916,
+        37941,
+        29742,
+        29851,
+        32490,
+        30282,
+        38121,
+        36885,
+        33726,
+        34243,
+        31050
+      ]
+    }, {
+      name: "Sales & Distribution",
+      data: [
+        11744,
+        3e4,
+        16005,
+        19771,
+        20185,
+        24377,
+        32147,
+        30912,
+        29243,
+        29213,
+        25663
+      ]
+    }, {
+      name: "Operations & Maintenance",
+      data: [
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        11164,
+        11218,
+        10077
+      ]
+    }, {
+      name: "Other",
+      data: [
+        21908,
+        5548,
+        8105,
+        11248,
+        8989,
+        11816,
+        18274,
+        17300,
+        13053,
+        11906,
+        10073
+      ]
+    }],
+    responsive: {
+      rules: [{
+        condition: {
+          maxWidth: 500
+        },
+        chartOptions: {
+          legend: {
+            layout: "horizontal",
+            align: "center",
+            verticalAlign: "bottom"
+          }
+        }
+      }]
+    }
+  };
+  return /* @__PURE__ */ React35.createElement("div", null, /* @__PURE__ */ React35.createElement(HighchartsReact, { highcharts: Highcharts, options: graph_data }));
+};
 
 // src/Components/DoubleBarChart.tsx
 import React36, { useEffect as useEffect5, useRef as useRef3 } from "react";
@@ -1502,7 +1629,7 @@ export {
   DoubleBarChart,
   DropDownGroup,
   FileUpload,
-  highchart_default as HighchartsLineChart,
+  HighchartsLineChart,
   HorizontalBarChart,
   Image,
   LineChart,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.14-Beta184",
+  "version": "0.0.14-Beta186",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",