Feat/charts refactor

examples/apps/web-charts/src/sections/area.js

@@ -1,6 +1,16 @@
 import { html } from "@inglorious/web"
 import { chart } from "@inglorious/charts"
 
+const composedData = [
+  { name: "Jan", revenue: 120, target: 80, forecast: 110 },
+  { name: "Feb", revenue: 180, target: 130, forecast: 150 },
+  { name: "Mar", revenue: 90, target: 140, forecast: 120 },
+  { name: "Apr", revenue: 210, target: 170, forecast: 190 },
+  { name: "May", revenue: 160, target: 220, forecast: 175 },
+  { name: "Jun", revenue: 200, target: 180, forecast: 195 },
+  { name: "Jul", revenue: 130, target: 190, forecast: 150 },
+]
+
 export function renderAreaSections(api) {
   return html`
     <div class="charts-comparison">
@@ -11,19 +21,16 @@ export function renderAreaSections(api) {
 
       <section class="chart-section">
         <h2>Area Chart - Recharts Style (Composition with api.getEntity)</h2>
-        ${chart.renderAreaChart(
+        ${chart.render(
           api.getEntity("salesAreaChartComposition"),
           {
             width: 800,
             height: 400,
             dataKeys: ["value"],
             children: [
-              chart.CartesianGrid({
-                stroke: "#eee",
-                strokeDasharray: "5 5",
-              }),
+              chart.CartesianGrid(),
               chart.XAxis({ dataKey: "name" }),
-              chart.YAxis({ width: "auto" }),
+              chart.YAxis(),
               chart.Area({
                 dataKey: "value",
                 fill: "#8884d8",
@@ -41,29 +48,39 @@ export function renderAreaSections(api) {
 
     <div class="charts-comparison">
       <section class="chart-section">
-        <h2>Area Chart - Composition (Padding 0)</h2>
-        ${chart.renderAreaChart(
-          api.getEntity("salesAreaChartCompositionPadding"),
+        <h2>Composed Area + Line + Bar - Config Style</h2>
+        ${api.render("composedSalesChart")}
+      </section>
+
+      <section class="chart-section">
+        <h2>Composed Area + Line + Bar - Recharts Style (Composition)</h2>
+        ${chart.render(
           {
             width: 800,
             height: 400,
-            padding: { top: 0, right: 0, bottom: 0, left: 0 },
-            dataKeys: ["value"],
+            data: composedData,
             children: [
-              chart.CartesianGrid({
-                stroke: "#eee",
-                strokeDasharray: "5 5",
-              }),
+              chart.CartesianGrid(),
               chart.XAxis({ dataKey: "name" }),
-              chart.YAxis({ width: "auto" }),
+              chart.YAxis(),
               chart.Area({
-                dataKey: "value",
+                dataKey: "revenue",
                 fill: "#8884d8",
-                fillOpacity: "0.6",
+                fillOpacity: "0.3",
                 stroke: "#8884d8",
+                showDots: true,
+                showTooltip: true,
+              }),
+              chart.Bar({
+                dataKey: "target",
+                fill: "#82ca9d",
+                showTooltip: true,
+              }),
+              chart.Line({
+                dataKey: "forecast",
+                stroke: "#ff7300",
+                showDots: true,
               }),
-              chart.Dots({ dataKey: "value", fill: "#8884d8" }),
-              chart.Tooltip({}),
             ],
           },
           api,
@@ -82,19 +99,16 @@ export function renderAreaSections(api) {
           Area Chart Multi Series - Recharts Style (Composition with
           api.getEntity)
         </h2>
-        ${chart.renderAreaChart(
+        ${chart.render(
           api.getEntity("multiSeriesAreaChartComposition"),
           {
             width: 800,
             height: 400,
             dataKeys: ["Revenue", "Expenses", "Profit"],
             children: [
-              chart.CartesianGrid({
-                stroke: "#eee",
-                strokeDasharray: "5 5",
-              }),
+              chart.CartesianGrid(),
               chart.XAxis({ dataKey: "name" }),
-              chart.YAxis({ width: "auto" }),
+              chart.YAxis(),
               chart.Area({
                 dataKey: "Revenue",
                 fill: "#8884d8",
@@ -147,19 +161,16 @@ export function renderAreaSections(api) {
         <h2>
           Area Chart Stacked - Recharts Style (Composition with api.getEntity)
         </h2>
-        ${chart.renderAreaChart(
+        ${chart.render(
           api.getEntity("multiSeriesAreaChartStackedComposition"),
           {
             width: 800,
             height: 400,
             dataKeys: ["Revenue", "Expenses", "Profit"],
             children: [
-              chart.CartesianGrid({
-                stroke: "#eee",
-                strokeDasharray: "5 5",
-              }),
+              chart.CartesianGrid(),
               chart.XAxis({ dataKey: "name" }),
-              chart.YAxis({ width: "auto" }),
+              chart.YAxis(),
               chart.Area({
                 dataKey: "Revenue",
                 fill: "#8884d8",

examples/apps/web-charts/src/sections/bar.js

@@ -11,20 +11,19 @@ export function renderBarSection(api) {
 
       <section class="chart-section">
         <h2>Bar Chart - Recharts Style (Composition with api.getEntity)</h2>
-        ${chart.renderBarChart(
+        ${chart.render(
           api.getEntity("salesBarChartComposition"),
           {
             width: 800,
             height: 400,
             children: [
               chart.CartesianGrid({
-                stroke: "#eee",
                 strokeDasharray: "3 3",
               }),
               chart.XAxis({ dataKey: "label" }),
-              chart.YAxis({ width: "auto" }),
+              chart.YAxis(),
               chart.Bar({ dataKey: "value" }),
-              chart.Tooltip({}),
+              chart.Tooltip(),
             ],
           },
           api,
@@ -35,21 +34,20 @@ export function renderBarSection(api) {
     <div class="charts-comparison">
       <section class="chart-section">
         <h2>Bar Chart - Composition (Padding 0)</h2>
-        ${chart.renderBarChart(
+        ${chart.render(
           api.getEntity("salesBarChartCompositionPadding"),
           {
             width: 800,
             height: 400,
             padding: { top: 0, right: 0, bottom: 0, left: 0 },
             children: [
               chart.CartesianGrid({
-                stroke: "#eee",
                 strokeDasharray: "3 3",
               }),
               chart.XAxis({ dataKey: "label" }),
-              chart.YAxis({ width: "auto" }),
+              chart.YAxis(),
               chart.Bar({ dataKey: "value" }),
-              chart.Tooltip({}),
+              chart.Tooltip(),
             ],
           },
           api,

examples/apps/web-charts/src/sections/donut.js

@@ -2,6 +2,17 @@ import { html } from "@inglorious/web"
 import { chart } from "@inglorious/charts"
 
 export function renderDonutSection(api) {
+  const inlineDonutDataA = [
+    { name: "A", value: 20 },
+    { name: "B", value: 35 },
+    { name: "C", value: 15 },
+  ]
+  const inlineDonutDataB = [
+    { name: "A", value: 10 },
+    { name: "B", value: 25 },
+    { name: "C", value: 40 },
+  ]
+
   return html`
     <div class="charts-comparison">
       <section class="chart-section">
@@ -11,7 +22,7 @@ export function renderDonutSection(api) {
 
       <section class="chart-section">
         <h2>Donut Chart - Recharts Style (Composition with api.getEntity)</h2>
-        ${chart.renderPieChart(
+        ${chart.render(
           api.getEntity("categoryDonutChartComposition"),
           {
             width: 500,
@@ -33,5 +44,67 @@ export function renderDonutSection(api) {
         )}
       </section>
     </div>
+
+    <div class="charts-comparison">
+      <section class="chart-section">
+        <h2>Donut Chart - Composition (No id #1)</h2>
+        ${chart.render(
+          {
+            type: "donut",
+            data: inlineDonutDataA,
+            width: 360,
+            height: 280,
+            showTooltip: true,
+          },
+          {
+            width: 360,
+            height: 280,
+            centerText: "Total",
+            children: [
+              chart.Pie({
+                dataKey: "value",
+                nameKey: "name",
+                cx: "50%",
+                cy: "50%",
+                outerRadius: 90,
+                innerRadius: 54,
+                label: true,
+              }),
+            ],
+          },
+          api,
+        )}
+      </section>
+
+      <section class="chart-section">
+        <h2>Donut Chart - Composition (No id #2)</h2>
+        ${chart.render(
+          {
+            type: "donut",
+            data: inlineDonutDataB,
+            width: 360,
+            height: 280,
+            showTooltip: true,
+          },
+          {
+            width: 360,
+            height: 280,
+            centerText: "Total",
+            children: [
+              chart.Pie({
+                dataKey: "value",
+                nameKey: "name",
+                cx: "50%",
+                cy: "50%",
+                outerRadius: 90,
+                innerRadius: 54,
+                label: true,
+              }),
+            ],
+          },
+          api,
+        )}
+      </section>
+    </div>
   `
 }