feat(#16): improve chart margin and padding

Author: peterpeterparker

src/components/slides/deckdeckgo-slide-chart/deckdeckgo-slide-chart.scss

@@ -7,8 +7,10 @@ div.deckgo-slide {
 }
 
 div.deckgo-chart-container {
-  width: 100%;
-  height: 100%;
+  margin: var(--slide-chart-margin-top, 32px) var(--slide-chart-margin-end, 96px) var(--slide-chart-margin-bottom, 32px) var(--slide-chart-margin-start, 32px);
+
+  width: calc(100vw - var(--slide-chart-margin-end, 96px) - var(--slide-chart-margin-start, 32px));
+  height: calc(100vw - var(--slide-chart-margin-top, 32px) - var(--slide-chart-margin-bottom, 32px));
 
   display: flex;
   align-items: center;

src/components/slides/deckdeckgo-slide-chart/deckdeckgo-slide-chart.tsx

@@ -80,14 +80,14 @@ export class DeckdeckgoSlideChart implements DeckdeckgoSlide {
     return new Promise<void>((resolve) => {
       // If width and height, use them otherwise full size
       if (this.width > 0 && this.height > 0) {
-        this.chartWidth = this.width;
-        this.chartHeight = this.height;
+        this.chartWidth = this.width - this.marginLeft - this.marginRight;
+        this.chartHeight = this.height - this.marginTop - this.marginBottom;
       } else {
         const container: HTMLElement = this.el.shadowRoot.querySelector('div.deckgo-chart-container');
 
         if (container) {
-          this.chartWidth = container.clientWidth;
-          this.chartHeight = container.clientHeight;
+          this.chartWidth = container.clientWidth - this.marginLeft - this.marginRight;
+          this.chartHeight = container.clientHeight - this.marginTop - this.marginBottom;
         }
       }