Merge pull request #466 from xychang/bar_chart_fix

Enable bar chart full-bar display at beginning and end

Author: lazyguru

docs/InputParameters.md

@@ -103,6 +103,7 @@ These key-value pairs should be placed under the key `bar`.
 | Key | Description | Number of Values | Default |
 |:--------|:-------|:-----------:|:------|
 | `barColor` | Color of bars in the chart | 1~NT | #69b3a2 |
+| `xAxisPadding` | Padding to ensure bars are fully displayed | 1~2 | null |
 | `yAxisLocation` |  Corresponding y-axis for the dataset (left\|right) | 1~NT | left |
 
 ### Parameters for a Summary

examples/TestBarChart.md

@@ -9,6 +9,7 @@ endDate: 2021-01-05
 bar:
     title: Weight Log
     yAxisLabel: Weight
+    xAxisPadding: 12h
     yAxisUnit: kg
     yMin: 0
     barColor: darkolivegreen
@@ -23,6 +24,7 @@ endDate: 2021-01-31
 bar:
     title: Weight Log
     yAxisLabel: Weight
+    xAxisPadding: 12h
     yAxisUnit: kg
     yMin: 0
     barColor: brown
@@ -37,6 +39,7 @@ endDate: 2021-01-21
 bar:
     title: Sin Wave
     yAxisLabel: Value
+    xAxisPadding: 12h
     barColor: yellow, red, green
 ```
 
@@ -49,6 +52,7 @@ endDate: 2021-01-05
 bar:
     title: Sin Square Wave
     yAxisLabel: Value
+    xAxisPadding: 12h
     yMin: 0
     barColor: yellow, red, green, blue, orange, white
 ```
@@ -64,6 +68,7 @@ stack: true
 bar:
     title: Sin Square Wave (Stacked)
     yAxisLabel: Value
+    xAxisPadding: 12h
     yMin: 0
     barColor: yellow, red, green, blue, orange, black
 ```

src/data.ts

@@ -791,11 +791,13 @@ export class LineInfo extends CommonChartInfo {
 export class BarInfo extends CommonChartInfo {
     barColor: string[];
     yAxisLocation: string[];
+    xAxisPadding: string;
 
     constructor() {
         super();
         this.barColor = []; // #69b3a2
         this.yAxisLocation = []; // left, for each target
+        this.xAxisPadding = null; // the string will be converted to Duration (a month is not nesscesary to 30 days)
     }
 
     public GetGraphType() {

src/parsing.ts

@@ -1836,6 +1836,14 @@ export function getRenderInfoFromYaml(
         bar.yAxisLocation = retYAxisLocation;
         // console.log(bar.yAxisLocation);
 
+        // xAxisPadding
+        let retXAxisPadding = getStringFromInput(
+            yamlBar?.xAxisPadding,
+            null
+        );
+        bar.xAxisPadding = retXAxisPadding;
+        // console.log(bar.xAxisPadding);
+
         renderInfo.bar.push(bar);
     } // bar related parameters
     // console.log(renderInfo.bar);

src/rendering.ts

@@ -307,6 +307,18 @@ function renderXAxis(
 
     let datasets = renderInfo.datasets;
     let xDomain = d3.extent(datasets.getDates());
+    if (chartInfo instanceof BarInfo && chartInfo.xAxisPadding !== null) {
+        let xAxisPaddingDuration = helper.parseDurationString(
+            chartInfo.xAxisPadding
+        );
+        if (xAxisPaddingDuration !== null) {
+            xDomain = [
+                xDomain[0].clone().subtract(xAxisPaddingDuration.asHours(), 'hours'),
+                xDomain[1].clone().add(xAxisPaddingDuration.asHours(), 'hours'),
+            ];
+        }
+    }
+    // console.log(xDomain);
     let xScale = d3
         .scaleTime()
         .domain(xDomain)
@@ -954,7 +966,7 @@ function renderBar(
         .enter()
         .append("rect")
         .attr("x", function (p: DataPoint, i: number) {
-            if (i === 0) {
+            if (i === 0 && barInfo.xAxisPadding === null) {
                 let portionVisible = currentDiaplayInd + 1 - totalDiaplaySet / 2.0;
                 if (portionVisible < 1.0) {
                     return (
@@ -975,15 +987,15 @@ function renderBar(
             return yScale(Math.max(p.value, 0));
         })
         .attr("width", function (p: DataPoint, i: number) {
-            if (i === 0) {
+            if (i === 0 && barInfo.xAxisPadding === null) {
                 let portionVisible = currentDiaplayInd + 1 - totalDiaplaySet / 2.0;
                 if (portionVisible < 0.0) {
                     return 0.0;
                 } else if (portionVisible < 1.0) {
                     return barWidth * portionVisible;
                 }
                 return barWidth;
-            } else if (i === dataset.getLength() - 1) {
+            } else if (i === dataset.getLength() - 1 && barInfo.xAxisPadding === null) {
                 let portionVisible =
                     1.0 - (currentDiaplayInd + 1 - totalDiaplaySet / 2.0);
                 if (portionVisible < 0.0) {