-
html`<div id='container' style="height:400px;position:relative;"></div>`
+
container = html`<div style="height:400px;position:relative;"></div>`

picasso.chart({
-
  element: document.querySelector('#container'),
+
  element: container,
  data,
  settings: {
    collections: [
      {
        key: 'stacked',
        data: {
          extract: {
            field: 'Date',
            props: {
              line: { field: 'Band' },
              end: { field: 'Percent' }
            }
          },
          stack: {
            stackKey: d => d.value,
            value: d => d.end.value
          }
        }
      }
    ],
    scales: {
      y: {
        data: {
          collection: {
            key: 'stacked'
          }
        },
        invert: true,
        expand: 0.2,
        min: 0,
        max: 100
      },
      t: { data: { extract: { field: 'Date' } } },
      color: {
        data: { extract: { field: 'Band' } },
        type: 'categorical-color',
        range: ['#E74C3C', '#F5B041', '#ABEBC6', '#2ECC71']
      }
    },
    components: [
      {
        type: 'axis',
        dock: 'left',
        scale: 'y'
      },
      {
        type: 'axis',
        dock: 'bottom',
        scale: 't'
      },
      {
        key: 'lines',
        type: 'line',
        data: {
          collection: 'stacked'
        },
        settings: {
          coordinates: {
            major: { scale: 't' },
            minor0: { scale: 'y', ref: 'start' },
            minor: { scale: 'y', ref: 'end' },
            layerId: { ref: 'line' }
          },
          layers: {
            curve: 'monotone',
            line: {
              show: false
            },
            area: {
              fill: { scale: 'color', ref: 'line' }
            }
          }
        }
      },
      {
        type: 'grid-line',
        x: {
          scale: 'x'
        },
        y: {
          scale: 'y'
        },
        ticks: {
          show: true,
          stroke: 'grey',
          strokeWidth: 0.2,
          strokeDasharray: '3, 3'
        },
        minorTicks: {
          show: false,
          stroke: 'grey',
          strokeWidth: 0.2
        }
      }
    ]
  }
})

-
generate_data = function() {
  let arr = [['Date', 'Band', 'WIP', 'Percent']];
+
data = {
  const arr = [['Date', 'Band', 'WIP', 'Percent']];

-
  d3.csv("https://gist.githubusercontent.com/gabovailati/c0adc579b96354caba4c3ee3e705a410/raw/83a605b2c170eaa2bdf056079688722624958944/agingwork.csv",
+
  await d3.csv(
    "https://gist.githubusercontent.com/gabovailati/c0adc579b96354caba4c3ee3e705a410/raw/83a605b2c170eaa2bdf056079688722624958944/agingwork.csv",
    function(d) {
      arr.push([
-
        new Date(d.date).toLocaleString("en-GB", {
+
        d3.timeParse(d.date).toLocaleString("en-GB", {
          day: "2-digit",
          month: "short",
          timeZone: "Australia/Sydney"
        }),
        d.band,
        +d.wip,
        +d.percent
      ]);

      return {};
    }
  );

  return [
    {
      type: 'matrix',
      data: arr
    }
  ];
}