import { T as Typography, C as Container, W as Wrapper, n as normalizeComponent, I as Icon } from "./index-d387159c.es.js";
import Vue, { defineComponent } from "vue";
import moment from "moment";
import { a as area, b as areaLineRange, c as areaSpline, e as areaStep, f as bar, l as line, h as spline, i as step, j as bb } from "./billboard-40998135.es.js";
import "v-tooltip";
import "@cldcvr/flow-aws-icon";
import "@cldcvr/flow-gcp-icon";
import "@cldcvr/flow-product-icon";
import "@cldcvr/flow-system-icon";
import "lodash-es";
import "vee-validate";
var render$1 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("Wrapper", {
    attrs: {
      "background": "tooltip",
      "border-radius": "4px"
    }
  }, [_c("Container", {
    attrs: {
      "padding": 8,
      "gap": 8,
      "direction": "column"
    }
  }, [_c("Typography", {
    attrs: {
      "type": "p3",
      "color": "light",
      "weight": "bold"
    }
  }, [_vm._v(" " + _vm._s(_vm.formatTitle(_vm.title)) + " ")]), _c("Container", {
    attrs: {
      "padding": 0,
      "gap": 4,
      "direction": "column"
    }
  }, _vm._l(_vm.points, function(p, index) {
    return _c("Container", {
      key: p.index + p.name + index,
      attrs: {
        "align": "space-between center",
        "padding": 0
      }
    }, [_c("Typography", {
      attrs: {
        "type": "p3",
        "color": "dark"
      }
    }, [_vm._v(" " + _vm._s(p.name) + " ")]), _c("Typography", {
      attrs: {
        "type": "p3",
        "color": "dark",
        "weight": "bold"
      }
    }, [_vm._v(" " + _vm._s(p.value) + " ")])], 1);
  }), 1)], 1)], 1);
};
var staticRenderFns$1 = [];
var SparklineTooltip_vue_vue_type_style_index_0_lang = "";
const __vue2_script$1 = defineComponent({
  name: "SparklineTooltip",
  components: {
    Typography,
    Container,
    Wrapper
  },
  methods: {
    formatTitle(date) {
      return moment(date).format("DD-MM-YYYY | hh:mm:ss A");
    }
  }
});
const __cssModules$1 = {};
var __component__$1 = /* @__PURE__ */ normalizeComponent(
  __vue2_script$1,
  render$1,
  staticRenderFns$1,
  false,
  __vue2_injectStyles$1,
  null,
  null,
  null
);
function __vue2_injectStyles$1(context) {
  for (let o in __cssModules$1) {
    this[o] = __cssModules$1[o];
  }
}
var SparklineTooltip = /* @__PURE__ */ function() {
  return __component__$1.exports;
}();
var render = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("Container", {
    attrs: {
      "direction": "column",
      "gap": 2,
      "padding": 0,
      "overflow": "visible"
    }
  }, [_c("Container", {
    attrs: {
      "gap": 6,
      "padding": 0
    }
  }, [_c("Icon", {
    attrs: {
      "name": "i-globe",
      "type": "filled",
      "state": "light",
      "size": "x-small"
    }
  }), _c("Typography", {
    attrs: {
      "type": "p3",
      "color": "light",
      "weight": "bold",
      "overflow": "ellipsis"
    }
  }, [_vm._v(" " + _vm._s(_vm.series.name) + " ")])], 1), _c("Container", {
    attrs: {
      "gap": 8,
      "padding": 0,
      "overflow": "visible"
    }
  }, [_c("Typography", {
    staticClass: "sparkline-value",
    attrs: {
      "type": "p1",
      "color": "dark",
      "weight": "bold",
      "overflow": "ellipsis"
    }
  }, [_vm._v(" 246 ms ")]), _c("div", {
    ref: "sparkline",
    staticClass: "flow-sparkline",
    style: _vm.styleObj
  })], 1)], 1);
};
var staticRenderFns = [];
var Sparkline_vue_vue_type_style_index_0_lang = "";
const TYPES = {
  area: area(),
  areaLineRange: areaLineRange(),
  areaSpline: areaSpline(),
  areaStep: areaStep(),
  bar: bar(),
  line: line(),
  spline: spline(),
  step: step()
};
const __vue2_script = defineComponent({
  name: "Sparkline",
  components: {
    Typography,
    Container,
    Icon,
    SparklineTooltip
  },
  props: {
    type: {
      type: String,
      default: "spline",
      validator(value) {
        return [
          "area",
          "areaLineRange",
          "areaSpline",
          "areaStep",
          "bar",
          "line",
          "spline",
          "step"
        ].includes(value);
      }
    },
    series: {
      type: Object,
      default: () => {
      }
    },
    eventLines: {
      type: Array,
      default: () => []
    },
    height: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {
      chart: null,
      colors: [
        "var(--color1-300)",
        "var(--color2-300)",
        "var(--color3-300)",
        "var(--color4-300)",
        "var(--color5-300)",
        "var(--color6-300)"
      ]
    };
  },
  computed: {
    styleObj() {
      return { height: `${this.height + 12}px` };
    }
  },
  mounted() {
    this.init();
  },
  beforeMount() {
    this.tooltip = Vue.extend(SparklineTooltip);
  },
  methods: {
    init() {
      this.chart = bb.generate({
        data: {
          ...this.getData()
        },
        axis: {
          y: {
            show: false,
            padding: {
              bottom: 0,
              top: 0
            }
          },
          x: {
            show: false
          }
        },
        point: {
          show: false
        },
        tooltip: {
          contents: (data, defaultTitleFormat, defaultValueFormat, color) => {
            const tooltipData = {
              title: null,
              points: []
            };
            data.forEach((d) => {
              tooltipData.title = d.x;
              tooltipData.points.push({
                name: d.name,
                value: d.value,
                color: color(d),
                index: d.index
              });
            });
            const tooltipInstance = new this.tooltip({ data: tooltipData });
            return tooltipInstance.$mount().$el.outerHTML;
          },
          show: true,
          linked: true,
          grouped: true
        },
        legend: {
          show: false
        },
        grid: {
          x: {
            lines: this.eventLines
          },
          y: {
            ...this.getThresholdLines()
          }
        },
        padding: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
        bindto: this.$refs.sparkline
      });
    },
    getData() {
      const columns = [];
      const colors = {};
      const types = {};
      const xAxisSet = /* @__PURE__ */ new Set();
      const yColumn = [this.series.name];
      this.series.points.forEach((point) => {
        xAxisSet.add(point.x);
        yColumn.push(point.y);
      });
      columns.push(yColumn);
      const xAxis = ["X_AXIS", ...xAxisSet];
      columns.push(xAxis);
      colors[this.series.name] = this.series.color ? this.series.color : this.hashCode(this.series.name);
      if (this.series.type) {
        types[this.series.name] = TYPES[this.series.type];
      } else {
        types[this.series.name] = areaSpline();
      }
      return { x: "X_AXIS", columns, colors, types };
    },
    hashCode(str) {
      let sum = 0;
      for (const index in str) {
        sum += str.charCodeAt(index);
      }
      return this.colors[sum % this.colors.length];
    },
    getThresholdLines() {
      const lines = [];
      if (this.series.thresholdLines) {
        this.series.thresholdLines.forEach((tline) => {
          lines.push({
            value: tline.value,
            text: tline.text,
            position: "end",
            class: "sparkline-threshold"
          });
        });
      }
      return { lines };
    }
  }
});
const __cssModules = {};
var __component__ = /* @__PURE__ */ normalizeComponent(
  __vue2_script,
  render,
  staticRenderFns,
  false,
  __vue2_injectStyles,
  null,
  null,
  null
);
function __vue2_injectStyles(context) {
  for (let o in __cssModules) {
    this[o] = __cssModules[o];
  }
}
var Sparkline = /* @__PURE__ */ function() {
  return __component__.exports;
}();
export { Sparkline as default };
//# sourceMappingURL=Sparkline-17a54aa6.es.js.map
