import deepClone from 'lodash/cloneDeep';

/* eslint-disable */
const defaultChart = {
  width: 1,
  height: 1,
  data: [
    {
      name: 'table'
    },
    {
      "name": "layout",
      "source": "table",
      "transform": [
        {
          "type": "aggregate",
          "summarize": [{"field": "x","ops": ["distinct"]}]
        },
        {
          "type": "formula",
          "field": "width",
          "expr": "(datum[\"distinct_x\"] + 1) * 15"
        },
        {"type": "formula","field": "height","expr": "300"}
      ]
    }
  ],
  marks: [
    {
      "type": "group",
      "from": {"data": "layout"},
      "properties": {
        "update": {
          "width": {"field": "width"},
          "height": {"field": "height"}
        }
      },
      "marks": [
        {
          type: 'rect',
          from: { data: 'table' },
          properties: {
            enter: {
              xc: { scale: 'x', field: 'x' },
              width: { scale: 'x', band: true, offset: -8 },
              y: { scale: 'y', field: 'y' },
              "y2": {"field": {"group": "height"}}
            }
          }
        }
      ],
       scales: [
        {
          name: 'x',
          type: 'ordinal',
          range: 'width',
          domain: { data: 'table', field: 'x' },
          "bandSize": 15,
          "round": true,
          "points": true,
          "padding": 1
        },
        {
          name: 'y',
          type: 'linear',
          "rangeMin": 300,
          "rangeMax": 0,
          domain: { data: 'table', field: 'y' },
          nice: true,
          zero: false
        }
      ],
      axes: [
        {
          "type": "x",
          "scale": "x",
          "tickSizeEnd": 0,
          "offset": 5,
          "properties": {
            "axis": {
              "strokeWidth": { "value": 0 }
            },
            "labels": {
              "text": {"template": "{{ datum[\"data\"] | truncate:25 }}"},
              "angle": {"value": 270},
              "align": {"value": "right"},
              "baseline": {"value": "middle"}
            }
          }
        },
        {
          "type": "y",
          "scale": "y",
          "tickSizeEnd": 0,
          "offset": 5,
          "properties": {
            "axis": {
              "strokeWidth": { "value": 0 }
            }
          }
        }
      ]
    }
  ]
};

/**
 * Return the Vega chart configuration
 * 
 * @export
 * @param {any} { columns, data } 
 */
export default function ({ columns, data }) {
  const config = deepClone(defaultChart);

  // We set the URL of the dataset
  config.data[0].url = data.url;
  config.data[0].format = {
    "type": "json",
    "property": data.property
  };

  if (columns.color.present) {
    // We add the color scale
    config.scales.push({
      "name": "c",
      "type": "ordinal",
      "domain": {"data": "table", "field": "color"},
      "range": "category10"
    });

    // We update the marks
    config.marks[0].marks[0].properties.enter.fill = {
      "scale": "c",
      "field": "color"
    };
  }

  // If the x column is a date, we need to use a
  // a temporal x axis and parse the x column as a date
  if (columns.x.type === 'date') {
    // We update the axis
    const xAxis = config.marks[0].axes.find(axis => axis.type === 'x');
    xAxis.formatType = 'time';

    // We parse the x column as a date
    config.data[0].format.parse = { x: 'date' };

    // The x axis has a template used to truncate the
    // text. Nevertheless, when using it, a date will
    // be displayed as a timestamp.
    // One solution could be to change the template to
    // format the string, but we don't know in which
    // format the date should be displayed so we can't
    // use it.
    // The other solution is just to remove the template
    // and Vega will use d3 to determine the best format.
    // In such a case, we don't truncate the tick, but
    // it shouldn't be necessary because usually the
    // result is short.
    // NOTE: actually if we just remove the template,
    // "text" will be an empty object and Vega won't
    // display any tick, so we need to remove text
    // instead
    delete xAxis.properties.labels.text;
  }

  return config;
};

@@ -452,17 +452,17 @@
  + 1) * 
-1
+2
 5%22%0A     
@@ -997,9 +997,10 @@
 t: -
-8
+15
  %7D,%0A
@@ -1312,17 +1312,17 @@
 dSize%22: 
-1
+2
 5,%0A     

Increase the size of the bars of the bar chart