diff --git a/dist/bubble_chart.js b/dist/bubble_chart.js index feab22a8..9db9cb92 100644 --- a/dist/bubble_chart.js +++ b/dist/bubble_chart.js @@ -2186,7 +2186,7 @@ /*!******************************************!*\ !*** ./src/bubble_chart/bubble_chart.js ***! \******************************************/ -/*! exports provided: default */function(module,__webpack_exports__,__webpack_require__){"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! d3 */ "./node_modules/d3/index.js");\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ "./node_modules/styled-components/dist/styled-components.browser.esm.js");\n/* harmony import */ var _bubble_chart_styles_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./bubble_chart_styles.css */ "./src/bubble_chart/bubble_chart_styles.css");\n/* harmony import */ var _bubble_chart_styles_css__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_bubble_chart_styles_css__WEBPACK_IMPORTED_MODULE_3__);\nfunction _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral(["\\n font-family: \'Open Sans\', \'Noto Sans JP\', \'Noto Sans\', \'Noto Sans CJK KR\', Helvetica, Arial, sans-serif;\\n text-align: center;\\n overflow: hidden;\\n"]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\n\n\n\n\nvar BubbleChartWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject());\n\nvar BubbleChart =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(BubbleChart, _Component);\n\n function BubbleChart() {\n var _getPrototypeOf2;\n\n var _this;\n\n _classCallCheck(this, BubbleChart);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(BubbleChart)).call.apply(_getPrototypeOf2, [this].concat(args)));\n\n _defineProperty(_assertThisInitialized(_this), "drawChartWithParams", function () {\n _this.drawChart(\'#chart\');\n });\n\n return _this;\n }\n\n _createClass(BubbleChart, [{\n key: "componentDidMount",\n value: function componentDidMount() {\n this.drawChartWithParams();\n window.addEventListener(\'resize\', this.drawChartWithParams);\n }\n }, {\n key: "componentDidUpdate",\n value: function componentDidUpdate() {\n this.drawChartWithParams();\n }\n }, {\n key: "componentWillUnmount",\n value: function componentWillUnmount() {\n window.removeEventListener(\'resize\', this.drawChartWithParams);\n }\n }, {\n key: "getWindowSize",\n value: function getWindowSize() {\n return window.innerWidth > window.innerHeight ? window.innerHeight : window.innerWidth;\n }\n }, {\n key: "getFontSize",\n value: function getFontSize() {\n var windowSize = this.getWindowSize();\n var fontSize = Math.round(windowSize * 0.017);\n return fontSize > 13 ? 13 : fontSize;\n }\n }, {\n key: "drawChart",\n value: function drawChart(id) {\n function getDivWidth(div) {\n var width = d3__WEBPACK_IMPORTED_MODULE_1__["select"](div) // get the width of div element\n .style(\'width\') // take of \'px\'\n .slice(0, -2); // return as an integer\n\n return Math.round(Number(width));\n }\n\n var _this$props = this.props,\n config = _this$props.config,\n data = _this$props.data;\n var windowSize = this.getWindowSize();\n var fontSize = this.getFontSize();\n var diameter = windowSize * .97,\n format = d3__WEBPACK_IMPORTED_MODULE_1__["format"](",d"),\n color = d3__WEBPACK_IMPORTED_MODULE_1__["scaleOrdinal"]().range(config.value_colors || []);\n var bubble = d3__WEBPACK_IMPORTED_MODULE_1__["pack"]().size([diameter, diameter]).padding(.5);\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](id).select("svg").remove();\n var svg = d3__WEBPACK_IMPORTED_MODULE_1__["select"](id).append("svg").attr("width", diameter).attr("height", diameter).attr("class", "bubble");\n var d = {\n children: data\n };\n var maxColor = this.props.maxColor;\n var root = d3__WEBPACK_IMPORTED_MODULE_1__["hierarchy"](d).sum(function (d) {\n return d.value;\n }).sort(function (a, b) {\n return b.value - a.value;\n });\n bubble(root);\n this.tooltip = d3__WEBPACK_IMPORTED_MODULE_1__["select"](id).append("div").attr("id", "tooltip").style("opacity", 1);\n var node = svg.selectAll("g").data(root.children).enter().append("g").attr("class", "node").attr("transform", function (d) {\n return "translate(" + d.x + "," + d.y + ")";\n }); // node.append("title")\n // .text(function(d) { return d.data.itemName + ": " + format(d.value); });\n\n node.append("circle").attr("class", "circle_node").attr("r", function (d) {\n return d.r;\n }).style("z-index", 1).style("opacity", function (d) {\n return d.data.color / maxColor > .15 ? d.data.color / maxColor : .15;\n }).style("fill", config[\'toColor\']).on("mousemove", function (d) {\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](this).style("stroke-width", 10) // set the stroke width\n .style("stroke", config[\'toColor\']).style("z-index", 10).style("stroke-opacity", function (d) {\n return d.data.color / maxColor > .5 ? d.data.color / 2 / maxColor : d.data.color * 2 / maxColor;\n });\n }).on("mouseout", function (d) {\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](this).style("z-index", 1).style("stroke-width", 0).style("opacity", function (d) {\n return d.data.color / maxColor > .15 ? d.data.color / maxColor : .15;\n });\n });\n\n if (config[\'value_titles\'] !== false) {\n node.append("text").attr("class", "label").attr("dy", config[\'value_labels\'] === false ? ".3em" : ".1em").style("text-anchor", "middle").style("font-size", config[\'font_size_value\']).text(function (d) {\n return d.data.itemName.substring(0, d.r / 3);\n });\n }\n\n if (config[\'value_labels\'] !== false) {\n node.append("text").attr("class", "label").attr("dy", config[\'value_titles\'] === false ? ".3em" : "1.5em").style("font-size", config[\'font_size_label\']).style("text-anchor", "middle").text(function (d) {\n return d.data.value;\n });\n } // node.on(\'mousemove\', d => {\n // d3.select(this)\n // .append(\'circle\')\n // .attr("r", function(d) { return d.r * 1.1; })\n // .style("fill", function(d) { \n // return color(d.data.color); \n // })\n // .style("z-index", "0")\n // .style("opacity", ".85");\n // let tooltip_html = \'\'\n // tooltip_html += \'
\' + d.itemName + \'\';\n // tooltip_html += \' \' + d.value + \'
\';\n // this.tooltip.html(tooltip_html);\n // // console.log(Math.round(Number(d3.select("#tooltip").style(\'width\').slice(0, -2))));\n // this.tooltip\n // .style("left", event.pageX-(Math.round(Number(this.tooltip.style(\'width\').slice(0, -2)))/2)+"px")\n // .style("top", event.pageY-50+"px")\n // .style(\'opacity\', 1)\n // .style("position", "absolute")\n // .style("text-align", "center")\n // .style("padding", ".5rem")\n // .style(\'pointer-events\', \'none\')\n // .style("color", "white")\n // .style("background-color", "#313639")\n // .style("background-opacity", ".85")\n // .style("border-radius", "#8px");\n // this.tooltip\n // .append(\'div\')\n // .style(\'border-right\', \'solid 8px transparent\')\n // .style(\'border-left\', \'solid 8px transparent\')\n // .style(\'border-top\', \'solid 8px #313639\')\n // .style(\'transform\', \'translateX(-50%)\')\n // .style(\'content\', \'\')\n // .style(\'top\', \'100%\')\n // .style(\'left\', "50%")\n // .style(\'height\', 5)\n // .style(\'width\', 5)\n // .style(\'position\', \'absolute\');\n // })\n\n\n node.on("mousemove", function (d) {\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](\'#chart\').append(\'div\').attr(\'id\', \'tooltip\');\n var tooltip_html = \'\';\n tooltip_html += \'
\' + d.data.itemName + \'
\';\n tooltip_html += \' \' + d.data.value + \'
\';\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](\'#tooltip\').html(tooltip_html);\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](\'#tooltip\').style("left", event.pageX - Math.round(Number(d3__WEBPACK_IMPORTED_MODULE_1__["select"](\'#tooltip\').style(\'width\').slice(0, -2))) / 2 + "px").style("top", event.pageY - 60 + "px").style(\'opacity\', 1).style("position", "absolute").style("font-family", "Open Sans").style("font-size", ".8rem").style("text-align", "center").style("padding", ".5rem").style(\'pointer-events\', \'none\').style("color", "white").style("background-color", "#313639").style("background-opacity", ".85").style("border-radius", "#8px");\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](\'#tooltip\').append(\'div\').style(\'border-right\', \'solid 4px transparent\').style(\'border-left\', \'solid 4px transparent\').style(\'border-top\', \'solid 4px #313639\').style(\'transform\', \'translateX(-50%)\').style(\'content\', \'\').style(\'top\', \'100%\').style(\'left\', "50%").style(\'height\', 5).style(\'width\', 5).style(\'position\', \'absolute\');\n }).on("mouseout", function (d) {\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](\'#tooltip\').transition().duration(\'50\').style("opacity", 0);\n });\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](self.frameElement).style("height", diameter + "px");\n }\n }, {\n key: "render",\n value: function render() {\n var fontSize = this.getFontSize();\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(BubbleChartWrapper, {\n id: "chart",\n style: {\n fontSize: fontSize\n }\n });\n }\n }]);\n\n return BubbleChart;\n}(react__WEBPACK_IMPORTED_MODULE_0__["Component"]);\n\nBubbleChart.defaultProps = {\n config: {},\n data: []\n};\n/* harmony default export */ __webpack_exports__["default"] = (BubbleChart);\n\n//# sourceURL=webpack://%5Bname%5D/./src/bubble_chart/bubble_chart.js?')},"./src/bubble_chart/bubble_chart_container.js": +/*! exports provided: default */function(module,__webpack_exports__,__webpack_require__){"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! d3 */ "./node_modules/d3/index.js");\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ "./node_modules/styled-components/dist/styled-components.browser.esm.js");\n/* harmony import */ var _bubble_chart_styles_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./bubble_chart_styles.css */ "./src/bubble_chart/bubble_chart_styles.css");\n/* harmony import */ var _bubble_chart_styles_css__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_bubble_chart_styles_css__WEBPACK_IMPORTED_MODULE_3__);\nfunction _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral(["\\n font-family: \'Open Sans\', \'Noto Sans JP\', \'Noto Sans\', \'Noto Sans CJK KR\', Helvetica, Arial, sans-serif;\\n text-align: center;\\n overflow: hidden;\\n"]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\n\n\n\n\nvar BubbleChartWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject());\n\nvar BubbleChart =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(BubbleChart, _Component);\n\n function BubbleChart() {\n var _getPrototypeOf2;\n\n var _this;\n\n _classCallCheck(this, BubbleChart);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(BubbleChart)).call.apply(_getPrototypeOf2, [this].concat(args)));\n\n _defineProperty(_assertThisInitialized(_this), "drawChartWithParams", function () {\n _this.drawChart(\'#chart\');\n });\n\n return _this;\n }\n\n _createClass(BubbleChart, [{\n key: "componentDidMount",\n value: function componentDidMount() {\n this.drawChartWithParams();\n window.addEventListener(\'resize\', this.drawChartWithParams);\n }\n }, {\n key: "componentDidUpdate",\n value: function componentDidUpdate() {\n this.drawChartWithParams();\n }\n }, {\n key: "componentWillUnmount",\n value: function componentWillUnmount() {\n window.removeEventListener(\'resize\', this.drawChartWithParams);\n }\n }, {\n key: "getWindowSize",\n value: function getWindowSize() {\n return window.innerWidth > window.innerHeight ? window.innerHeight : window.innerWidth;\n }\n }, {\n key: "getFontSize",\n value: function getFontSize() {\n var windowSize = this.getWindowSize();\n var fontSize = Math.round(windowSize * 0.017);\n return fontSize > 13 ? 13 : fontSize;\n }\n }, {\n key: "drawChart",\n value: function drawChart(id) {\n function getDivWidth(div) {\n var width = d3__WEBPACK_IMPORTED_MODULE_1__["select"](div) // get the width of div element\n .style(\'width\') // take of \'px\'\n .slice(0, -2); // return as an integer\n\n return Math.round(Number(width));\n }\n\n var _this$props = this.props,\n config = _this$props.config,\n data = _this$props.data;\n var windowSize = this.getWindowSize();\n var fontSize = this.getFontSize();\n var diameter = windowSize * .97,\n format = d3__WEBPACK_IMPORTED_MODULE_1__["format"](",d"),\n color = d3__WEBPACK_IMPORTED_MODULE_1__["scaleOrdinal"]().range(config.value_colors || []);\n var bubble = d3__WEBPACK_IMPORTED_MODULE_1__["pack"]().size([diameter, diameter]).padding(.5);\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](id).select("svg").remove();\n var svg = d3__WEBPACK_IMPORTED_MODULE_1__["select"](id).append("svg").attr("width", diameter).attr("height", diameter).attr("class", "bubble");\n var d = {\n children: data\n };\n var maxColor = this.props.maxColor;\n var root = d3__WEBPACK_IMPORTED_MODULE_1__["hierarchy"](d).sum(function (d) {\n return d.value;\n }).sort(function (a, b) {\n return b.value - a.value;\n });\n bubble(root);\n this.tooltip = d3__WEBPACK_IMPORTED_MODULE_1__["select"](id).append("div").attr("id", "tooltip").style("opacity", 1);\n var node = svg.selectAll("g").data(root.children).enter().append("g").attr("class", "node").attr("transform", function (d) {\n return "translate(" + d.x + "," + d.y + ")";\n });\n node.append("circle").attr("class", "circle_node").attr("r", function (d) {\n return d.r;\n }).style("z-index", 1).style("opacity", function (d) {\n return d.data.color / maxColor > .15 ? d.data.color / maxColor : .15;\n }).style("fill", config[\'toColor\']).on("mousemove", function (d) {\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](this).style("stroke-width", 10) // set the stroke width\n .style("stroke", config[\'toColor\']).style("z-index", 10).style("stroke-opacity", function (d) {\n return d.data.color / maxColor > .5 ? d.data.color / 2 / maxColor : d.data.color * 2 / maxColor;\n });\n }).on("mouseout", function (d) {\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](this).style("z-index", 1).style("stroke-width", 0).style("opacity", function (d) {\n return d.data.color / maxColor > .15 ? d.data.color / maxColor : .15;\n });\n });\n\n if (config[\'value_titles\'] !== false) {\n node.append("text").attr("class", "label").attr("dy", config[\'value_labels\'] === false ? ".3em" : ".1em").style("text-anchor", "middle").style("font-size", config[\'font_size_value\']).text(function (d) {\n return d.data.itemName.substring(0, d.r / 3);\n });\n }\n\n if (config[\'value_labels\'] !== false) {\n node.append("text").attr("class", "label").attr("dy", config[\'value_titles\'] === false ? ".3em" : "1.5em").style("font-size", config[\'font_size_label\']).style("text-anchor", "middle").text(function (d) {\n return d.data.value;\n });\n }\n\n node.on("mousemove", function (d) {\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](\'#chart\').append(\'div\').attr(\'id\', \'tooltip\');\n var tooltip_html = \'\';\n tooltip_html += \'
\' + d.data.itemName + \'
\';\n tooltip_html += \' \' + d.data.value + \'
\';\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](\'#tooltip\').html(tooltip_html);\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](\'#tooltip\').style("left", event.pageX - Math.round(Number(d3__WEBPACK_IMPORTED_MODULE_1__["select"](\'#tooltip\').style(\'width\').slice(0, -2))) / 2 + "px").style("top", event.pageY - 60 + "px").style(\'opacity\', 1).style("position", "absolute").style("font-family", "Open Sans").style("font-size", ".8rem").style("text-align", "center").style("padding", ".5rem").style(\'pointer-events\', \'none\').style("color", "white").style("background-color", "#313639").style("background-opacity", ".85").style("border-radius", "#8px");\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](\'#tooltip\').append(\'div\').style(\'border-right\', \'solid 4px transparent\').style(\'border-left\', \'solid 4px transparent\').style(\'border-top\', \'solid 4px #313639\').style(\'transform\', \'translateX(-50%)\').style(\'content\', \'\').style(\'top\', \'100%\').style(\'left\', "50%").style(\'height\', 5).style(\'width\', 5).style(\'position\', \'absolute\');\n }).on("mouseout", function (d) {\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](\'#tooltip\').transition().duration(\'50\').style("opacity", 0);\n });\n d3__WEBPACK_IMPORTED_MODULE_1__["select"](self.frameElement).style("height", diameter + "px");\n }\n }, {\n key: "render",\n value: function render() {\n var fontSize = this.getFontSize();\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(BubbleChartWrapper, {\n id: "chart",\n style: {\n fontSize: fontSize\n }\n });\n }\n }]);\n\n return BubbleChart;\n}(react__WEBPACK_IMPORTED_MODULE_0__["Component"]);\n\nBubbleChart.defaultProps = {\n config: {},\n data: []\n};\n/* harmony default export */ __webpack_exports__["default"] = (BubbleChart);\n\n//# sourceURL=webpack://%5Bname%5D/./src/bubble_chart/bubble_chart.js?')},"./src/bubble_chart/bubble_chart_container.js": /*!****************************************************!*\ !*** ./src/bubble_chart/bubble_chart_container.js ***! \****************************************************/ diff --git a/dist/calendar_chart.js b/dist/calendar_chart.js index 4d2ac96f..4d46fce3 100644 --- a/dist/calendar_chart.js +++ b/dist/calendar_chart.js @@ -2706,7 +2706,7 @@ /*!******************************************************************!*\ !*** ./src/calendar_visualization/calendar-heatmap.component.js ***! \******************************************************************/ -/*! exports provided: default */function(module,__webpack_exports__,__webpack_require__){"use strict";eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! d3 */ \"./node_modules/d3/index.js\");\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _calendar_heatmap_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./calendar-heatmap.css */ \"./src/calendar_visualization/calendar-heatmap.css\");\n/* harmony import */ var _calendar_heatmap_css__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_calendar_heatmap_css__WEBPACK_IMPORTED_MODULE_4__);\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral([\"\\n font-family: \\\"Open Sans\\\", \\\"Noto Sans JP\\\", \\\"Noto Sans\\\", \\\"Noto Sans CJK KR\\\",\\n Helvetica, Arial, sans-serif;\\n color: #3a4245;\\n height: 100%;\\n justify-content: center;\\n align-items: center;\\n text-align: center;\\n\"]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\n\n\n\n\n\nvar CalendarChartWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3__[\"default\"].div(_templateObject()); //display: flex;\n//flex-direction: column;\n\nvar CalendarHeatmap =\n/*#__PURE__*/\nfunction (_React$Component) {\n _inherits(CalendarHeatmap, _React$Component);\n\n function CalendarHeatmap(props) {\n var _this;\n\n _classCallCheck(this, CalendarHeatmap);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(CalendarHeatmap).call(this, props));\n _this.settings = {\n gutter: 5,\n item_gutter: 1,\n width: 1000,\n height: 2500,\n item_size: 10,\n label_padding: 40,\n max_block_height: 20,\n transition_duration: 500,\n tooltip_width: 250,\n tooltip_padding: 15\n };\n _this.in_transition = false;\n _this.overview = _this.props.overview;\n _this.history = ['global'];\n _this.selected = {};\n _this.calcDimensions = _this.calcDimensions.bind(_assertThisInitialized(_this));\n return _this;\n }\n\n _createClass(CalendarHeatmap, [{\n key: \"componentDidUpdate\",\n value: function componentDidUpdate() {\n // Delete the previous visualization and create a new one with the new props\n // change color, change dates, \n this.cleanPreviousObjects();\n this.createElements();\n this.createAddons();\n }\n }, {\n key: \"cleanPreviousObjects\",\n value: function cleanPreviousObjects() {\n var titlesel = d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"]('#calendar-heatmap').select(\"svg\"); // titlesel.select(\"#TitleLabel\").remove();\n // titlesel.select(\"#DatesBound\").remove(); \n\n titlesel.remove();\n }\n }, {\n key: \"createAddons\",\n value: function createAddons() // RGB: changing component to allow center title an other information related to the visualization\n {\n var titlesel = d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"]('#calendar-heatmap').select(\"svg\"); //var newsvg = titlesel.append(\"svg\");\n\n var element = titlesel.node();\n var posx = element.getBoundingClientRect().width;\n var posy = element.getBoundingClientRect().height; // console.log(posy);\n\n var sdate = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.props.startdate).format('MMMM Do YYYY');\n var edate = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.props.enddate).format('MMMM Do YYYY'); // console.log(\"Show DR \" + this.props.show_date_range);\n\n if (this.props.show_date_range == true) {\n // console.log(\"DR\");\n // let h1 = this.svg.attr('height');\n // this.svg.attr('height', h1 + 15);\n titlesel.append(\"text\").text(\"\" + sdate + \" to \" + edate).attr(\"transform\", \"translate(\" + posx / 2 + \",\" + (posy - 65) + \")\").attr(\"text-anchor\", \"middle\").style(\"position\", \"absolute\").attr(\"font-size\", this.props.font_size_date).attr(\"id\", \"DatesBound\").attr(\"fill\", \"#3a4245\").attr(\"class\", \"looker-vis-context-value-text\");\n } // console.log(\"Show Title \" + this.props.show_date_range);\n\n\n if (this.props.show_title == true) {\n // console.log(\"Title\");\n // let h1 = this.svg.attr('height');\n // this.svg.attr('height', h1 + 15);\n titlesel.append(\"text\").text(this.props.title).attr(\"transform\", \"translate(\" + posx / 2 + \",\" + (posy - 40) + \")\").attr(\"text-anchor\", \"middle\").style(\"position\", \"absolute\").attr(\"font-size\", this.props.font_size_title).attr(\"id\", \"TitleLabel\") //.attr(\"font-weight\", 100)\n .attr(\"fill\", \"#3a4245\").attr(\"class\", \"looker-vis-context-title-text\");\n }\n }\n }, {\n key: \"componentDidMount\",\n value: function componentDidMount() {\n this.createElements();\n this.parseData();\n this.drawChart();\n this.createAddons();\n window.addEventListener('resize', this.calcDimensions);\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n window.removeEventListener('resize', this.calcDimensions);\n }\n }, {\n key: \"createElements\",\n value: function createElements() {\n // Create svg element\n this.svg = d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"]('#calendar-heatmap').append('svg').attr('class', 'svg'); // Create other svg elements\n\n this.items = this.svg.append('g');\n this.labels = this.svg.append('g');\n this.buttons = this.svg.append('g'); // Add tooltip to the same element as main svg\n // this.tooltip = d3.select('#calendar-heatmap')\n // .append('div')\n // .attr('class', styles.heatmapTooltip)\n // .style('opacity', 0)\n // .style('pointer-events', 'none')\n // .style('position', 'absolute')\n // .style('z-index', 9999)\n // .style('width', '250px')\n // .style('max-width', '250px')\n // .style('overflow', 'hidden')\n // .style('padding', '15px')\n // .style('font-size', '12px')\n // .style('line-height', '14px')\n // .style('color', 'rgb(51, 51, 51)')\n // .style('background', 'rgba(255, 255, 255, 0.75)')\n\n this.tooltip = d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"]('#calendar-heatmap').append('div').attr(\"id\", \"tooltip\").attr(\"class\", _calendar_heatmap_css__WEBPACK_IMPORTED_MODULE_4___default.a.heatmapTooltip).style(\"opacity\", 1).style(\"position\", \"absolute\").style(\"text-align\", \"center\").style(\"padding\", \".5rem\").style(\"color\", \"#313639\").style(\"border-radius\", \"#8px\");\n this.calcDimensions();\n } // Calculate dimensions based on available width\n\n }, {\n key: \"calcDimensions\",\n value: function calcDimensions() {\n var dayIndex = Math.round((moment__WEBPACK_IMPORTED_MODULE_1___default()() - moment__WEBPACK_IMPORTED_MODULE_1___default()().subtract(1, 'year').startOf('week')) / 86400000);\n var colIndex = Math.trunc(dayIndex / 7);\n var numWeeks = colIndex + 1;\n this.settings.width = this.container.offsetWidth < 1000 ? 1000 : this.container.offsetWidth;\n this.settings.item_size = (this.settings.width - this.settings.label_padding) / numWeeks - this.settings.gutter;\n this.settings.height = this.settings.label_padding + 7 * (this.settings.item_size + this.settings.gutter);\n this.svg.attr('width', this.settings.width).attr('height', this.settings.height + 80); // RGB: adding extra space for titles and additional labels\n\n this.parseData();\n\n if (!!this.props.data && !!this.props.data[0].summary) {\n console.log(\"happening\");\n this.drawChart();\n }\n }\n }, {\n key: \"parseData\",\n value: function parseData() {\n this.props.data.map(function (d) {\n var summary = d.details.reduce(function (uniques, project) {\n if (!uniques[project.name]) {\n uniques[project.name] = {\n 'value': project.value\n };\n } else {\n uniques[project.name].value += project.value;\n }\n\n return uniques;\n }, {});\n var unsorted_summary = Object.keys(summary).map(function (key) {\n return {\n 'name': key,\n 'value': summary[key].value\n };\n });\n d.summary = unsorted_summary.sort(function (a, b) {\n return b.value - a.value;\n });\n return d;\n });\n }\n }, {\n key: \"drawChart\",\n value: function drawChart() {\n console.log(this.overview);\n\n if (this.overview === 'global') {\n this.drawGlobalOverview();\n } else if (this.overview === 'year') {\n this.drawYearOverview();\n } else if (this.overview === 'month') {\n this.drawMonthOverview();\n } else if (this.overview === 'week') {\n this.drawWeekOverview();\n } else if (this.overview === 'day') {\n this.drawDayOverview();\n }\n }\n /**\n * Draw global overview (multiple years)\n */\n\n }, {\n key: \"drawGlobalOverview\",\n value: function drawGlobalOverview() {\n var _this2 = this;\n\n // Add current overview to the history\n if (this.history[this.history.length - 1] !== this.overview) {\n this.history.push(this.overview);\n } // Define start and end of the dataset\n\n\n var start = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.props.data[0].date).startOf('year');\n var end = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.props.data[this.props.data.length - 1].date).endOf('year'); // Define array of years and total values\n\n var year_data = d3__WEBPACK_IMPORTED_MODULE_2__[\"timeYears\"](start, end).map(function (d) {\n var date = moment__WEBPACK_IMPORTED_MODULE_1___default()(d);\n\n var getSummary = function getSummary() {\n var summary = _this2.props.data.reduce(function (summary, d) {\n if (moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).year() === date.year()) {\n d.summary.map(function (item) {\n if (!summary[item.name]) {\n summary[item.name] = {\n 'value': item.value\n };\n } else {\n summary[item.name].value += item.value;\n }\n });\n }\n\n return summary;\n }, {});\n\n var unsorted_summary = Object.keys(summary).map(function (key) {\n return {\n 'name': key,\n 'value': summary[key].value\n };\n });\n return unsorted_summary.sort(function (a, b) {\n return b.value - a.value;\n });\n };\n\n return {\n 'date': date,\n 'total': _this2.props.data.reduce(function (prev, current) {\n if (moment__WEBPACK_IMPORTED_MODULE_1___default()(current.date).year() === date.year()) {\n prev += current.total;\n }\n\n return prev;\n }, 0),\n 'summary': getSummary()\n };\n }); // Calculate max value of all the years in the dataset\n\n var max_value = d3__WEBPACK_IMPORTED_MODULE_2__[\"max\"](year_data, function (d) {\n return d.total;\n }); //console.log(year_data);\n // Define year labels and axis\n\n var year_labels = d3__WEBPACK_IMPORTED_MODULE_2__[\"timeYears\"](start, end).map(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d);\n });\n var yearScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleBand\"]().rangeRound([0, this.settings.width]).padding([0.05]).domain(year_labels.map(function (d) {\n return d.year();\n })); // Add global data items to the overview\n\n this.items.selectAll('.item-block-year').remove();\n var item_block = this.items.selectAll('.item-block-year').data(year_data).enter().append('rect').attr('class', 'item item-block-year').style('cursor', 'pointer').attr('width', function () {\n return (_this2.settings.width - _this2.settings.label_padding) / year_labels.length - _this2.settings.gutter * 5;\n }).attr('height', function () {\n return _this2.settings.height - _this2.settings.label_padding;\n }).attr('transform', function (d) {\n return 'translate(' + yearScale(d.date.year()) + ',' + _this2.settings.tooltip_padding * 2 + ')';\n }).attr('fill', function (d) {\n var color = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleLinear\"]().range(['#ffffff', _this2.props.color]).domain([-0.15 * max_value, max_value]);\n return color(d.total) || '#ff4500';\n }).on('click', function (d) {\n if (_this2.in_transition) {\n return;\n } // Set in_transition flag\n\n\n _this2.in_transition = true; // Set selected date to the one clicked on\n\n _this2.selected = d; // Hide tooltip\n\n _this2.hideTooltip(); // Remove all global overview related items and labels\n\n\n _this2.removeGlobalOverview(); // Redraw the chart\n\n\n _this2.overview = 'year';\n\n _this2.drawChart();\n }).style('opacity', 0).on('mousemove', function (d) {\n if (_this2.in_transition) {\n return;\n }\n\n var tooltip_html = '';\n tooltip_html += '
Total: ';\n tooltip_html += '' + d.total + '';\n tooltip_html += ' ' + _this2.props.totmeasure + '
';\n\n _this2.tooltip.html(tooltip_html); // console.log(Math.round(Number(d3.select(\"#tooltip\").style('width').slice(0, -2))));\n\n\n _this2.tooltip.style(\"left\", event.pageX - Math.round(Number(_this2.tooltip.style('width').slice(0, -2))) / 2 + \"px\").style(\"top\", event.pageY - 50 + \"px\").style('opacity', 1).style(\"position\", \"absolute\").style(\"text-align\", \"center\").style(\"padding\", \".5rem\").style('font-size', '.8rem').style('pointer-events', 'none').style(\"color\", \"white\").style(\"background-color\", \"#313639\").style(\"background-opacity\", \".85\").style(\"border-radius\", \"#8px\");\n\n _this2.tooltip.append('div').style('border-right', 'solid 8px transparent').style('border-left', 'solid 8px transparent').style('border-top', 'solid 8px #313639').style('transform', 'translateX(-50%)').style('content', '').style('top', '100%').style('left', \"50%\").style('height', 5).style('width', 5).style('position', 'absolute');\n }).on('mouseout', function () {\n if (_this2.in_transition) {\n return;\n }\n\n _this2.hideTooltip();\n }).transition().delay(function (d, i) {\n return _this2.settings.transition_duration * (i + 1) / 10;\n }).duration(function () {\n return _this2.settings.transition_duration;\n }).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1).call(function (transition, callback) {\n if (transition.empty()) {\n callback();\n }\n\n var n = 0;\n transition.each(function () {\n ++n;\n }).on('end', function () {\n if (! --n) {\n callback.apply(this, arguments);\n }\n });\n }, function () {\n _this2.in_transition = false;\n }); // Add year labels\n\n this.labels.selectAll('.label-year').remove();\n this.labels.selectAll('.label-year').data(year_labels).enter().append('text').attr('class', 'label label-year').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('font-size', function () {\n return Math.floor(_this2.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return d.year();\n }).attr('x', function (d) {\n return yearScale(d.year());\n }).attr('y', this.settings.label_padding / 2).on('mouseenter', function (year_label) {\n if (_this2.in_transition) {\n return;\n }\n\n _this2.items.selectAll('.item-block-year').transition().duration(_this2.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).year() === year_label.year() ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this2.in_transition) {\n return;\n }\n\n _this2.items.selectAll('.item-block-year').transition().duration(_this2.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1);\n }).on('click', function (d) {\n if (_this2.in_transition) {\n return;\n } // Set in_transition flag\n\n\n _this2.in_transition = true; // Set selected year to the one clicked on\n\n _this2.selected = {\n date: d\n }; // Hide tooltip\n\n _this2.hideTooltip(); // Remove all global overview related items and labels\n\n\n _this2.removeGlobalOverview(); // Redraw the chart\n\n\n _this2.overview = 'year';\n\n _this2.drawChart();\n });\n }\n /**\n * Draw year overview\n */\n\n }, {\n key: \"drawYearOverview\",\n value: function drawYearOverview() {\n var _this3 = this;\n\n // Add current overview to the history\n if (this.history[this.history.length - 1] !== this.overview) {\n this.history.push(this.overview);\n } // Define start and end date of the selected year\n\n\n var start_of_year = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).startOf('year');\n var end_of_year = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).endOf('year'); // Filter data down to the selected year\n\n var year_data = this.props.data.filter(function (d) {\n return start_of_year <= moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date) && moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date) < end_of_year;\n }); // Calculate max value of the year data\n\n var max_value = d3__WEBPACK_IMPORTED_MODULE_2__[\"max\"](year_data, function (d) {\n return d.total;\n }); //let min_value = d3.min(year_data,d => d.total)\n\n var color = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleLinear\"]().range(['#ffffff', this.props.color]).domain([-0.15 * max_value, max_value]);\n\n var calcItemX = function calcItemX(d) {\n var date = moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date);\n var dayIndex = Math.round((date - moment__WEBPACK_IMPORTED_MODULE_1___default()(start_of_year).startOf('week')) / 86400000);\n var colIndex = Math.trunc(dayIndex / 7);\n return colIndex * (_this3.settings.item_size + _this3.settings.gutter) + _this3.settings.label_padding;\n };\n\n var calcItemY = function calcItemY(d) {\n return _this3.settings.label_padding + moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).weekday() * (_this3.settings.item_size + _this3.settings.gutter);\n };\n\n var calcItemSize = function calcItemSize(d) {\n if (max_value <= 0) {\n return _this3.settings.item_size;\n }\n\n return _this3.settings.item_size * 0.75 + _this3.settings.item_size * d.total / max_value * 0.25;\n };\n\n this.items.selectAll('.item-circle').remove();\n this.items.selectAll('.item-circle').data(year_data).enter().append('rect').attr('class', 'item item-circle').style('cursor', 'pointer').style('opacity', 0).attr('x', function (d) {\n return calcItemX(d) + (_this3.settings.item_size - calcItemSize(d)) / 2;\n }).attr('y', function (d) {\n return calcItemY(d) + (_this3.settings.item_size - calcItemSize(d)) / 2;\n }).attr('rx', function (d) {\n return calcItemSize(d);\n }).attr('ry', function (d) {\n return calcItemSize(d);\n }).attr('width', function (d) {\n return calcItemSize(d);\n }).attr('height', function (d) {\n return calcItemSize(d);\n }).attr('fill', function (d) {\n return d.total > 0 ? color(d.total) : 'transparent';\n }) // .on('click', d => {\n // if (this.in_transition) { return }\n // // Don't transition if there is no data to show\n // if (d.total === 0) { return }\n // this.in_transition = true\n // // Set selected date to the one clicked on\n // this.selected = d\n // // Hide tooltip\n // this.hideTooltip()\n // // Remove all year overview related items and labels\n // this.removeYearOverview()\n // // Redraw the chart\n // this.overview = 'day'\n // this.drawChart()\n // })\n .on('mousemove', function (d) {\n if (_this3.in_transition) {\n return;\n } // Pulsating animation\n\n\n var circle = d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](d3__WEBPACK_IMPORTED_MODULE_2__[\"event\"].currentTarget);\n\n var repeat = function repeat() {\n circle = circle.transition().duration(_this3.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).attr('x', function (d) {\n return calcItemX(d) - (_this3.settings.item_size * 1.1 - _this3.settings.item_size) / 2;\n }).attr('y', function (d) {\n return calcItemY(d) - (_this3.settings.item_size * 1.1 - _this3.settings.item_size) / 2;\n }).attr('width', _this3.settings.item_size * 1.1).attr('height', _this3.settings.item_size * 1.1).transition().duration(_this3.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).attr('x', function (d) {\n return calcItemX(d) + (_this3.settings.item_size - calcItemSize(d)) / 2;\n }).attr('y', function (d) {\n return calcItemY(d) + (_this3.settings.item_size - calcItemSize(d)) / 2;\n }).attr('width', function (d) {\n return calcItemSize(d);\n }).attr('height', function (d) {\n return calcItemSize(d);\n }).on('end', repeat);\n };\n\n repeat(); //RGB: Changes on the tooltip (hint) displayed in the monthly - day view\n // Construct tooltip\n\n var tooltip_html = ''; //tooltip_html += `
${d.total ? this.formatTime(d.total) : 'No time'} tracked
`\n\n tooltip_html += \"
\").concat(d.total ? d.total : 'No entries for ', \" \");\n tooltip_html += ' Total ' + _this3.props.measure + '

';\n tooltip_html += '
' + moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).format('dddd, MMM Do YYYY') + '
'; // Add summary to the tooltip\n // let counter = 0\n // console.log(d);\n // while ( counter < d.summary.length ) {\n // tooltip_html += '
' + d.summary[counter].name + ':'\n // //tooltip_html += '' + this.formatTime(d.summary[counter].value) + '
'\n // tooltip_html += ' ' + d.summary[counter].value+ ''\n // tooltip_html += ' ' + this.props.measure + ''\n // counter++\n // }\n // Calculate tooltip position\n\n var x = calcItemX(d) + _this3.settings.item_size;\n\n if (_this3.settings.width - x < _this3.settings.tooltip_width + _this3.settings.tooltip_padding * 3) {\n x -= _this3.settings.tooltip_width + _this3.settings.tooltip_padding * 2;\n }\n\n var y = calcItemY(d) + _this3.settings.item_size; // Show tooltip\n\n\n _this3.tooltip.html(tooltip_html);\n\n console.log(Math.round(Number(d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](\"#tooltip\").style('width').slice(0, -2))));\n\n _this3.tooltip.style(\"left\", event.pageX - Math.round(Number(_this3.tooltip.style('width').slice(0, -2))) / 2 - 5 + \"px\").style(\"top\", event.pageY - 100 + \"px\").transition().duration(50).style('opacity', .9).style('pointer-events', 'none').style(\"position\", \"absolute\").style(\"text-align\", \"center\").style(\"padding\", \".5rem\").style(\"color\", \"white\").style(\"background-color\", \"#313639\").style(\"background-opacity\", \".75\").style(\"border-radius\", \"#8px\");\n\n _this3.tooltip.append('div').style('border-right', 'solid 8px transparent').style('border-left', 'solid 8px transparent').style('border-top', 'solid 8px #313639').style('transform', 'translateX(-50%)').style('content', '').style('top', '100%').style('left', \"50%\").style('height', 5).style('width', 5).style('position', 'absolute');\n }).on('mouseout', function () {\n if (_this3.in_transition) {\n return;\n } // Set circle radius back to what its supposed to be\n\n\n d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](d3__WEBPACK_IMPORTED_MODULE_2__[\"event\"].currentTarget).transition().duration(_this3.settings.transition_duration / 2).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).attr('x', function (d) {\n return calcItemX(d) + (_this3.settings.item_size - calcItemSize(d)) / 2;\n }).attr('y', function (d) {\n return calcItemY(d) + (_this3.settings.item_size - calcItemSize(d)) / 2;\n }).attr('width', function (d) {\n return calcItemSize(d);\n }).attr('height', function (d) {\n return calcItemSize(d);\n }); // Hide tooltip\n\n _this3.hideTooltip();\n }).transition().delay(function () {\n return (Math.cos(Math.PI * Math.random()) + 1) * _this3.settings.transition_duration;\n }).duration(function () {\n return _this3.settings.transition_duration;\n }).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1).call(function (transition, callback) {\n if (transition.empty()) {\n callback();\n }\n\n var n = 0;\n transition.each(function () {\n return ++n;\n }).on('end', function () {\n if (! --n) {\n callback.apply(this, arguments);\n }\n });\n }, function () {\n _this3.in_transition = false;\n }); // Add month labels\n\n var month_labels = d3__WEBPACK_IMPORTED_MODULE_2__[\"timeMonths\"](start_of_year, end_of_year);\n var monthScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleLinear\"]().range([0, this.settings.width]).domain([0, month_labels.length]);\n this.labels.selectAll('.label-month').remove();\n this.labels.selectAll('.label-month').data(month_labels).enter().append('text').attr('class', 'label label-month').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('font-size', function () {\n return Math.floor(_this3.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return d.toLocaleDateString('en-us', {\n month: 'short'\n });\n }).attr('x', function (d, i) {\n return monthScale(i) + (monthScale(i) - monthScale(i - 1)) / 2;\n }).attr('y', this.settings.label_padding / 2).on('mouseenter', function (d) {\n if (_this3.in_transition) {\n return;\n }\n\n var selected_month = moment__WEBPACK_IMPORTED_MODULE_1___default()(d);\n\n _this3.items.selectAll('.item-circle').transition().duration(_this3.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).isSame(selected_month, 'month') ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this3.in_transition) {\n return;\n }\n\n _this3.items.selectAll('.item-circle').transition().duration(_this3.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1);\n }).on('click', function (d) {\n if (_this3.in_transition) {\n return;\n } // Check month data\n\n\n var month_data = _this3.props.data.filter(function (e) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d).startOf('month') <= moment__WEBPACK_IMPORTED_MODULE_1___default()(e.date) && moment__WEBPACK_IMPORTED_MODULE_1___default()(e.date) < moment__WEBPACK_IMPORTED_MODULE_1___default()(d).endOf('month');\n }); // Don't transition if there is no data to show\n\n\n if (!month_data.length) {\n return;\n } // Set selected month to the one clicked on\n\n\n _this3.selected = {\n date: d\n };\n _this3.in_transition = true; // Hide tooltip\n\n _this3.hideTooltip(); // Remove all year overview related items and labels\n\n\n _this3.removeYearOverview(); // Redraw the chart\n\n\n _this3.overview = 'month';\n\n _this3.drawChart();\n }); // Add day labels\n\n var day_labels = d3__WEBPACK_IMPORTED_MODULE_2__[\"timeDays\"](moment__WEBPACK_IMPORTED_MODULE_1___default()().startOf('week'), moment__WEBPACK_IMPORTED_MODULE_1___default()().endOf('week'));\n var dayScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleBand\"]().rangeRound([this.settings.label_padding, this.settings.height]).domain(day_labels.map(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d).weekday();\n }));\n this.labels.selectAll('.label-day').remove();\n this.labels.selectAll('.label-day').data(day_labels).enter().append('text').attr('class', 'label label-day').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('x', this.settings.label_padding / 3).attr('y', function (d, i) {\n return dayScale(i) + dayScale.bandwidth() / 1.75;\n }).style('text-anchor', 'left').attr('font-size', function () {\n return Math.floor(_this3.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d).format('dddd')[0];\n }).on('mouseenter', function (d) {\n if (_this3.in_transition) {\n return;\n }\n\n var selected_day = moment__WEBPACK_IMPORTED_MODULE_1___default()(d);\n\n _this3.items.selectAll('.item-circle').transition().duration(_this3.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).day() === selected_day.day() ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this3.in_transition) {\n return;\n }\n\n _this3.items.selectAll('.item-circle').transition().duration(_this3.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1);\n }); // Add button to switch back to previous overview\n\n this.drawButton();\n }\n /**\n * Draw month overview\n */\n\n }, {\n key: \"drawMonthOverview\",\n value: function drawMonthOverview() {\n var _this4 = this;\n\n // Add current overview to the history\n if (this.history[this.history.length - 1] !== this.overview) {\n this.history.push(this.overview);\n } // Define beginning and end of the month\n\n\n var start_of_month = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).startOf('month');\n var end_of_month = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).endOf('month'); // Filter data down to the selected month\n\n var month_data = this.props.data.filter(function (d) {\n return start_of_month <= moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date) && moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date) < end_of_month;\n });\n var max_value = d3__WEBPACK_IMPORTED_MODULE_2__[\"max\"](month_data, function (d) {\n return d3__WEBPACK_IMPORTED_MODULE_2__[\"max\"](d.summary, function (d) {\n return d.value;\n });\n }); // Define day labels and axis\n\n var day_labels = d3__WEBPACK_IMPORTED_MODULE_2__[\"timeDays\"](moment__WEBPACK_IMPORTED_MODULE_1___default()().startOf('week'), moment__WEBPACK_IMPORTED_MODULE_1___default()().endOf('week'));\n var dayScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleBand\"]().rangeRound([this.settings.label_padding, this.settings.height]).domain(day_labels.map(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d).weekday();\n })); // Define week labels and axis\n\n var week_labels = [start_of_month.clone()];\n\n while (start_of_month.week() !== end_of_month.week()) {\n week_labels.push(start_of_month.add(1, 'week').clone());\n }\n\n var weekScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleBand\"]().rangeRound([this.settings.label_padding, this.settings.width]).padding([0.05]).domain(week_labels.map(function (weekday) {\n return weekday.week();\n })); // Add month data items to the overview\n\n this.items.selectAll('.item-block-month').remove();\n var item_block = this.items.selectAll('.item-block-month').data(month_data).enter().append('g').attr('class', 'item item-block-month').style('cursor', 'pointer').attr('width', function () {\n return (_this4.settings.width - _this4.settings.label_padding) / week_labels.length - _this4.settings.gutter * 5;\n }).attr('height', function () {\n return Math.min(dayScale.bandwidth(), _this4.settings.max_block_height);\n }).attr('transform', function (d) {\n return 'translate(' + weekScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).week()) + ',' + (dayScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).weekday()) + dayScale.bandwidth() / 1.75 - 15) + ')';\n }).attr('total', function (d) {\n return d.total;\n }).attr('date', function (d) {\n return d.date;\n }).attr('offset', 0); // .on('click', d => {\n // if (this.in_transition) { return }\n // // Don't transition if there is no data to show\n // if (d.total === 0) { return }\n // this.in_transition = true\n // // Set selected date to the one clicked on\n // this.selected = d\n // // Hide tooltip\n // this.hideTooltip()\n // // Remove all month overview related items and labels\n // this.removeMonthOverview()\n // // Redraw the chart\n // this.overview = 'day'\n // this.drawChart()\n // })\n\n var item_width = (this.settings.width - this.settings.label_padding) / week_labels.length - this.settings.gutter * 5;\n var itemScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleLinear\"]().rangeRound([0, item_width]);\n var item_gutter = this.settings.item_gutter;\n item_block.selectAll('.item-block-rect').data(function (d) {\n return d.summary;\n }).enter().append('rect').attr('class', 'item item-block-rect').style('cursor', 'pointer').attr('x', function (d) {\n var total = parseInt(d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this.parentNode).attr('total'));\n var offset = parseInt(d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this.parentNode).attr('offset'));\n itemScale.domain([0, total]);\n d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this.parentNode).attr('offset', offset + itemScale(d.value));\n return offset;\n }).attr('width', function (d) {\n var total = parseInt(d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this.parentNode).attr('total'));\n itemScale.domain([0, total]);\n return Math.max(itemScale(d.value) - item_gutter, 1);\n }).attr('height', function () {\n return Math.min(dayScale.bandwidth(), _this4.settings.max_block_height);\n }).attr('fill', function (d) {\n var color = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleLinear\"]().range(['#ffffff', _this4.props.color]).domain([-0.15 * max_value, max_value]);\n return color(d.value) || '#ff4500';\n }).style('opacity', 0).on('mousemove', function (d) {\n if (_this4.in_transition) {\n return;\n } // Get date from the parent node\n\n\n var parentNode = d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](d3__WEBPACK_IMPORTED_MODULE_2__[\"event\"].currentTarget.parentNode);\n var date = new Date(parentNode.attr('date')); //RGB: Changes on the label to use the props parameter \n // Construct tooltip\n\n var tooltip_html = ''; // tooltip_html += '
' + (d.value ? this.formatTime(d.value) : 'No time') + ' tracked
'\n\n tooltip_html += '
' + (d.value ? d.value : 'No entries for') + ' ' + _this4.props.measure + '
'; //tooltip_html += ' Total ' + this.props.measure + ''\n\n tooltip_html += '
' + moment__WEBPACK_IMPORTED_MODULE_1___default()(date).format('dddd, MMM Do YYYY') + '
'; // Calculate tooltip position\n\n var x = weekScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(date).week()) + _this4.settings.tooltip_padding;\n\n while (_this4.settings.width - x < _this4.settings.tooltip_width + _this4.settings.tooltip_padding * 3) {\n x -= 10;\n }\n\n var y = dayScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(date).weekday()) + _this4.settings.tooltip_padding * 2; // Show tooltip\n\n _this4.tooltip.html(tooltip_html);\n\n _this4.tooltip.style(\"left\", event.pageX - Math.round(Number(_this4.tooltip.style('width').slice(0, -2))) / 2 + \"px\").style(\"top\", event.pageY - 70 + \"px\").transition().duration(50).style('opacity', .9).style('pointer-events', 'none').style(\"position\", \"absolute\").style(\"text-align\", \"center\").style(\"padding\", \".5rem\").style(\"color\", \"white\").style(\"background-color\", \"#313639\").style(\"background-opacity\", \".75\").style(\"border-radius\", \"#8px\");\n\n _this4.tooltip.append('div').style('border-right', 'solid 8px transparent').style('border-left', 'solid 8px transparent').style('border-top', 'solid 8px #313639').style('transform', 'translateX(-50%)').style('content', '').style('top', '100%').style('left', \"50%\").style('height', 5).style('width', 5).style('position', 'absolute');\n }).on('mouseout', function () {\n if (_this4.in_transition) {\n return;\n }\n\n _this4.hideTooltip();\n }).transition().delay(function () {\n return (Math.cos(Math.PI * Math.random()) + 1) * _this4.settings.transition_duration;\n }).duration(function () {\n return _this4.settings.transition_duration;\n }).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1).call(function (transition, callback) {\n if (transition.empty()) {\n callback();\n }\n\n var n = 0;\n transition.each(function () {\n return ++n;\n }).on('end', function () {\n if (! --n) {\n callback.apply(this, arguments);\n }\n });\n }, function () {\n _this4.in_transition = false;\n }); // Add week labels\n\n this.labels.selectAll('.label-week').remove();\n this.labels.selectAll('.label-week').data(week_labels).enter().append('text').attr('class', 'label label-week').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('font-size', function () {\n return Math.floor(_this4.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return 'Week ' + d.week();\n }).attr('x', function (d) {\n return weekScale(d.week());\n }).attr('y', this.settings.label_padding / 2).on('mouseenter', function (weekday) {\n if (_this4.in_transition) {\n return;\n }\n\n _this4.items.selectAll('.item-block-month').transition().duration(_this4.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).week() === weekday.week() ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this4.in_transition) {\n return;\n }\n\n _this4.items.selectAll('.item-block-month').transition().duration(_this4.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1);\n }).on('click', function (d) {\n if (_this4.in_transition) {\n return;\n } // Check week data\n\n\n var week_data = _this4.props.data.filter(function (e) {\n return d.startOf('week') <= moment__WEBPACK_IMPORTED_MODULE_1___default()(e.date) && moment__WEBPACK_IMPORTED_MODULE_1___default()(e.date) < d.endOf('week');\n }); // Don't transition if there is no data to show\n\n\n if (!week_data.length) {\n return;\n }\n\n _this4.in_transition = true; // Set selected month to the one clicked on\n\n _this4.selected = {\n date: d\n }; // Hide tooltip\n\n _this4.hideTooltip(); // Remove all year overview related items and labels\n\n\n _this4.removeMonthOverview(); // Redraw the chart\n\n\n _this4.overview = 'week';\n\n _this4.drawChart();\n }); // Add day labels\n\n this.labels.selectAll('.label-day').remove();\n this.labels.selectAll('.label-day').data(day_labels).enter().append('text').attr('class', 'label label-day').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('x', this.settings.label_padding / 3).attr('y', function (d, i) {\n return dayScale(i) + dayScale.bandwidth() / 1.75;\n }).style('text-anchor', 'left').attr('font-size', function () {\n return Math.floor(_this4.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d).format('dddd')[0];\n }).on('mouseenter', function (d) {\n if (_this4.in_transition) {\n return;\n }\n\n var selected_day = moment__WEBPACK_IMPORTED_MODULE_1___default()(d);\n\n _this4.items.selectAll('.item-block-month').transition().duration(_this4.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).day() === selected_day.day() ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this4.in_transition) {\n return;\n }\n\n _this4.items.selectAll('.item-block-month').transition().duration(_this4.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1);\n }); // Add button to switch back to previous overview\n\n this.drawButton();\n }\n /**\n * Draw week overview\n */\n\n }, {\n key: \"drawWeekOverview\",\n value: function drawWeekOverview() {\n var _this5 = this;\n\n // Add current overview to the history\n if (this.history[this.history.length - 1] !== this.overview) {\n this.history.push(this.overview);\n } // Define beginning and end of the week\n\n\n var start_of_week = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).startOf('week');\n var end_of_week = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).endOf('week'); // Filter data down to the selected week\n\n var week_data = this.props.data.filter(function (d) {\n return start_of_week <= moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date) && moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date) < end_of_week;\n });\n var max_value = d3__WEBPACK_IMPORTED_MODULE_2__[\"max\"](week_data, function (d) {\n return d3__WEBPACK_IMPORTED_MODULE_2__[\"max\"](d.summary, function (d) {\n return d.value;\n });\n }); // Define day labels and axis\n\n var day_labels = d3__WEBPACK_IMPORTED_MODULE_2__[\"timeDays\"](moment__WEBPACK_IMPORTED_MODULE_1___default()().startOf('week'), moment__WEBPACK_IMPORTED_MODULE_1___default()().endOf('week'));\n var dayScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleBand\"]().rangeRound([this.settings.label_padding, this.settings.height]).domain(day_labels.map(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d).weekday();\n })); // Define week labels and axis\n\n var week_labels = [start_of_week];\n var weekScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleBand\"]().rangeRound([this.settings.label_padding, this.settings.width]).padding([0.01]).domain(week_labels.map(function (weekday) {\n return weekday.week();\n })); // Add week data items to the overview\n\n this.items.selectAll('.item-block-week').remove();\n var item_block = this.items.selectAll('.item-block-week').data(week_data).enter().append('g').attr('class', 'item item-block-week').style('cursor', 'pointer').attr('width', function () {\n return (_this5.settings.width - _this5.settings.label_padding) / week_labels.length - _this5.settings.gutter * 5;\n }).attr('height', function () {\n return Math.min(dayScale.bandwidth(), _this5.settings.max_block_height);\n }).attr('transform', function (d) {\n return 'translate(' + weekScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).week()) + ',' + (dayScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).weekday()) + dayScale.bandwidth() / 1.75 - 15) + ')';\n }).attr('total', function (d) {\n return d.total;\n }).attr('date', function (d) {\n return d.date;\n }).attr('offset', 0); // .on('click', d => {\n // if (this.in_transition) { return }\n // // Don't transition if there is no data to show\n // if (d.total === 0) { return }\n // this.in_transition = true\n // // Set selected date to the one clicked on\n // this.selected = d\n // // Hide tooltip\n // this.hideTooltip()\n // // Remove all week overview related items and labels\n // this.removeWeekOverview()\n // // Redraw the chart\n // this.overview = 'day'\n // this.drawChart()\n // })\n\n var item_width = (this.settings.width - this.settings.label_padding) / week_labels.length - this.settings.gutter * 5;\n var itemScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleLinear\"]().rangeRound([0, item_width]);\n var item_gutter = this.settings.item_gutter;\n item_block.selectAll('.item-block-week').data(function (d) {\n return d.summary;\n }).enter().append('rect').attr('class', 'item item-block-week').style('cursor', 'pointer').attr('x', function (d) {\n var total = parseInt(d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this.parentNode).attr('total'));\n var offset = parseInt(d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this.parentNode).attr('offset'));\n itemScale.domain([0, total]);\n d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this.parentNode).attr('offset', offset + itemScale(d.value));\n return offset;\n }).attr('width', function (d) {\n var total = parseInt(d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this.parentNode).attr('total'));\n itemScale.domain([0, total]);\n return Math.max(itemScale(d.value) - item_gutter, 1);\n }).attr('height', function () {\n return Math.min(dayScale.bandwidth(), _this5.settings.max_block_height);\n }).attr('fill', function (d) {\n var color = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleLinear\"]().range(['#ffffff', _this5.props.color]).domain([-0.15 * max_value, max_value]);\n return color(d.value) || '#ff4500';\n }).style('opacity', 0).on('mouseover', function (d) {\n if (_this5.in_transition) {\n return;\n } // Get date from the parent node\n\n\n var parentNode = d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](d3__WEBPACK_IMPORTED_MODULE_2__[\"event\"].currentTarget.parentNode);\n var date = new Date(parentNode.attr('date')); // RGB: Changes on tooltip to add the props parameters\n // Construct tooltip\n\n var tooltip_html = '';\n tooltip_html += '
' + (d.value ? d.value : 'No entries for') + ' ' + _this5.props.measure + '
'; // //tooltip_html += ' Total ' + this.props.measure + ''\n\n tooltip_html += '
' + moment__WEBPACK_IMPORTED_MODULE_1___default()(date).format('dddd, MMM Do YYYY') + '
'; // Calculate tooltip position\n\n var total = parseInt(parentNode.attr('total'));\n itemScale.domain([0, total]);\n var x = parseInt(d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](d3__WEBPACK_IMPORTED_MODULE_2__[\"event\"].currentTarget).attr('x')) + itemScale(d.value) / 4 + _this5.settings.tooltip_width / 4;\n\n while (_this5.settings.width - x < _this5.settings.tooltip_width + _this5.settings.tooltip_padding * 3) {\n x -= 10;\n }\n\n var y = dayScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(date).weekday()) + _this5.settings.tooltip_padding * 1.5; // Show tooltip\n\n _this5.tooltip.html(tooltip_html);\n\n _this5.tooltip.style(\"left\", event.pageX - Math.round(Number(_this5.tooltip.style('width').slice(0, -2))) / 2 + \"px\").style(\"top\", event.pageY - 50 + \"px\").transition().duration(50).style('opacity', .9).style('pointer-events', 'none').style(\"position\", \"absolute\").style(\"text-align\", \"center\").style(\"padding\", \".5rem\").style(\"color\", \"white\").style(\"background-color\", \"#313639\").style(\"background-opacity\", \".75\").style(\"border-radius\", \"#8px\");\n\n _this5.tooltip.append('div').style('border-right', 'solid 8px transparent').style('border-left', 'solid 8px transparent').style('border-top', 'solid 8px #313639').style('transform', 'translateX(-50%)').style('content', '').style('top', '100%').style('left', \"50%\").style('height', 5).style('width', 5).style('position', 'absolute');\n }).on('mouseout', function () {\n if (_this5.in_transition) {\n return;\n }\n\n _this5.hideTooltip();\n }).transition().delay(function () {\n return (Math.cos(Math.PI * Math.random()) + 1) * _this5.settings.transition_duration;\n }).duration(function () {\n return _this5.settings.transition_duration;\n }).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1).call(function (transition, callback) {\n if (transition.empty()) {\n callback();\n }\n\n var n = 0;\n transition.each(function () {\n return ++n;\n }).on('end', function () {\n if (! --n) {\n callback.apply(this, arguments);\n }\n });\n }, function () {\n _this5.in_transition = false;\n }); // Add week labels\n\n this.labels.selectAll('.label-week').remove();\n this.labels.selectAll('.label-week').data(week_labels).enter().append('text').attr('class', 'label label-week').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('font-size', function () {\n return Math.floor(_this5.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return 'Week ' + d.week();\n }).attr('x', function (d) {\n return weekScale(d.week());\n }).attr('y', this.settings.label_padding / 2).on('mouseenter', function (weekday) {\n if (_this5.in_transition) {\n return;\n }\n\n _this5.items.selectAll('.item-block-week').transition().duration(_this5.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).week() === weekday.week() ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this5.in_transition) {\n return;\n }\n\n _this5.items.selectAll('.item-block-week').transition().duration(_this5.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1);\n }); // Add day labels\n\n this.labels.selectAll('.label-day').remove();\n this.labels.selectAll('.label-day').data(day_labels).enter().append('text').attr('class', 'label label-day').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('x', this.settings.label_padding / 3).attr('y', function (d, i) {\n return dayScale(i) + dayScale.bandwidth() / 1.75;\n }).style('text-anchor', 'left').attr('font-size', function () {\n return Math.floor(_this5.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d).format('dddd')[0];\n }).on('mouseenter', function (d) {\n if (_this5.in_transition) {\n return;\n }\n\n var selected_day = moment__WEBPACK_IMPORTED_MODULE_1___default()(d);\n\n _this5.items.selectAll('.item-block-week').transition().duration(_this5.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).day() === selected_day.day() ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this5.in_transition) {\n return;\n }\n\n _this5.items.selectAll('.item-block-week').transition().duration(_this5.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1);\n }); // Add button to switch back to previous overview\n\n this.drawButton();\n }\n /**\n * Draw day overview\n */\n\n }, {\n key: \"drawDayOverview\",\n value: function drawDayOverview() {\n var _this6 = this;\n\n // Add current overview to the history\n if (this.history[this.history.length - 1] !== this.overview) {\n this.history.push(this.overview);\n } // Initialize selected date to today if it was not set\n\n\n if (!Object.keys(this.selected).length) {\n this.selected = this.props.data[this.props.data.length - 1];\n }\n\n var project_labels = this.selected.summary.map(function (project) {\n return project.name;\n });\n var projectScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleBand\"]().rangeRound([this.settings.label_padding, this.settings.height]).domain(project_labels);\n var itemScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleTime\"]().range([this.settings.label_padding * 2, this.settings.width]).domain([moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).startOf('day'), moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).endOf('day')]);\n this.items.selectAll('.item-block').remove();\n this.items.selectAll('.item-block').data(this.selected.details).enter().append('rect').attr('class', 'item item-block').style('cursor', 'pointer').attr('x', function (d) {\n return itemScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date));\n }).attr('y', function (d) {\n return projectScale(d.name) + projectScale.bandwidth() / 2 - 15;\n }).attr('width', function (d) {\n var end = itemScale(d3__WEBPACK_IMPORTED_MODULE_2__[\"timeSecond\"].offset(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date), d.value));\n return Math.max(end - itemScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date)), _this6.props.sizeonday); //RGB: adding the props parameter to redifine the size of the rectangle in the day view\n }).attr('height', function () {\n return Math.min(projectScale.bandwidth(), _this6.settings.max_block_height);\n }).attr('fill', function () {\n return _this6.props.color;\n }).style('opacity', 0).on('mouseover', function (d) {\n if (_this6.in_transition) {\n return;\n } //RGB: Changes to add the measure comming from props to the visualization\n // Construct tooltip\n\n\n var tooltip_html = '';\n tooltip_html += \"
\").concat(d.name, \"

\"); // tooltip_html += '
' + (d.value ? this.formatTime(d.value) : 'No time') + ' tracked
'\n\n tooltip_html += '
' + (d.value ? d.value : 'No entries for') + ' ' + _this6.props.measure + '
';\n tooltip_html += '
on ' + moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).format('dddd, MMM Do YYYY HH:mm') + '
'; // Calculate tooltip position\n\n var x = d.value * 100 / (60 * 60 * 24) + itemScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date));\n\n while (_this6.settings.width - x < _this6.settings.tooltip_width + _this6.settings.tooltip_padding * 3) {\n x -= 10;\n }\n\n var y = projectScale(d.name) + projectScale.bandwidth() / 2 + _this6.settings.tooltip_padding / 2; // Show tooltip\n\n _this6.tooltip.style(\"left\", event.pageX - Math.round(Number(_this6.tooltip.style('width').slice(0, -2))) / 2 + \"px\").style(\"top\", event.pageY - 100 + \"px\").transition().duration(50).style('opacity', .9).style('pointer-events', 'none').style(\"position\", \"absolute\").style(\"text-align\", \"center\").style(\"padding\", \".5rem\").style(\"color\", \"white\").style(\"background-color\", \"#313639\").style(\"background-opacity\", \".75\").style(\"border-radius\", \"#8px\");\n\n _this6.tooltip.append('div').style('border-right', 'solid 8px transparent').style('border-left', 'solid 8px transparent').style('border-top', 'solid 8px #313639').style('transform', 'translateX(-50%)').style('content', '').style('top', '100%').style('left', \"50%\").style('height', 5).style('width', 5).style('position', 'absolute');\n }).on('mouseout', function () {\n if (_this6.in_transition) {\n return;\n }\n\n _this6.hideTooltip();\n }).on('click', function (d) {\n if (!!_this6.props.handler && typeof _this6.props.handler == 'function') {\n _this6.props.handler(d);\n }\n }).transition().delay(function () {\n return (Math.cos(Math.PI * Math.random()) + 1) * _this6.settings.transition_duration;\n }).duration(function () {\n return _this6.settings.transition_duration;\n }).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0.5).call(function (transition, callback) {\n if (transition.empty()) {\n callback();\n }\n\n var n = 0;\n transition.each(function () {\n return ++n;\n }).on('end', function () {\n if (! --n) {\n callback.apply(this, arguments);\n }\n });\n }, function () {\n _this6.in_transition = false;\n }); // Add time labels\n\n var timeLabels = d3__WEBPACK_IMPORTED_MODULE_2__[\"timeHours\"](moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).startOf('day'), moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).endOf('day'));\n var timeScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleTime\"]().range([this.settings.label_padding * 2, this.settings.width]).domain([0, timeLabels.length]);\n this.labels.selectAll('.label-time').remove();\n this.labels.selectAll('.label-time').data(timeLabels).enter().append('text').attr('class', 'label label-time').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('font-size', function () {\n return Math.floor(_this6.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d).format('HH:mm');\n }).attr('x', function (d, i) {\n return timeScale(i);\n }).attr('y', this.settings.label_padding / 2).on('mouseenter', function (d) {\n if (_this6.in_transition) {\n return;\n }\n\n var selected = itemScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d));\n\n _this6.items.selectAll('.item-block').transition().duration(_this6.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n var start = itemScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date));\n var end = itemScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).add(d.value, 'seconds'));\n return selected >= start && selected <= end ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this6.in_transition) {\n return;\n }\n\n _this6.items.selectAll('.item-block').transition().duration(_this6.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0.5);\n }); // Add project labels\n\n var label_padding = this.settings.label_padding;\n this.labels.selectAll('.label-project').remove();\n this.labels.selectAll('.label-project').data(project_labels).enter().append('text').attr('class', 'label label-project').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('x', this.settings.gutter).attr('y', function (d) {\n return projectScale(d) + projectScale.bandwidth() / 2;\n }).attr('min-height', function () {\n return projectScale.bandwidth();\n }).style('text-anchor', 'left').attr('font-size', function () {\n return Math.floor(_this6.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return d;\n }).each(function () {\n var obj = d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this),\n text_length = obj.node().getComputedTextLength(),\n text = obj.text();\n\n while (text_length > label_padding * 1.5 && text.length > 0) {\n text = text.slice(0, -1);\n obj.text(text + '...');\n text_length = obj.node().getComputedTextLength();\n }\n }).on('mouseenter', function (project) {\n if (_this6.in_transition) {\n return;\n }\n\n _this6.items.selectAll('.item-block').transition().duration(_this6.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n return d.name === project ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this6.in_transition) {\n return;\n }\n\n _this6.items.selectAll('.item-block').transition().duration(_this6.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0.5);\n }); // Add button to switch back to previous overview\n\n this.drawButton();\n }\n /**\n * Draw the button for navigation purposes\n */\n\n }, {\n key: \"drawButton\",\n value: function drawButton() {\n var _this7 = this;\n\n this.buttons.selectAll('.button').remove();\n var button = this.buttons.append('g').attr('class', 'button button-back').style('cursor', 'pointer').attr('fill', 'transparent').style('opacity', 0).style('stroke-width', 2).style('stroke', 'rgb(170, 170, 170)') // .on('mouseover', d => {\n // let tooltip_html = ''\n // tooltip_html += `
Change View

`\n // // Show tooltip\n // this.tooltip.html(tooltip_html)\n // .style('left', this.settings.label_padding / 2 + 'px')\n // .style('top', this.settings.label_padding / 2 + 'px')\n // .transition()\n // .duration(this.settings.transition_duration / 2)\n // .ease(d3.easeLinear)\n // .style('opacity', 1)\n // })\n // .on('mouseout', () => {\n // if (this.in_transition) { return }\n // this.hideTooltip()\n // })\n .on('click', function () {\n if (_this7.in_transition) {\n return;\n } // Set transition boolean\n\n\n _this7.in_transition = true;\n\n _this7.hideTooltip(); // Clean the canvas from whichever overview type was on\n\n\n if (_this7.overview === 'year') {\n _this7.removeYearOverview();\n } else if (_this7.overview === 'month') {\n _this7.removeMonthOverview();\n } else if (_this7.overview === 'week') {\n _this7.removeWeekOverview();\n } else if (_this7.overview === 'day') {\n _this7.removeDayOverview();\n } // Redraw the chart\n\n\n _this7.history.pop();\n\n _this7.overview = _this7.history.pop();\n\n _this7.drawChart();\n }); // button.append('circle')\n // .attr('cx', this.settings.label_padding / 2.21)\n // .attr('cy', this.settings.label_padding / 2.21)\n // .attr('r', this.settings.item_size / 2)\n\n button.append('text').style('stroke-width', 1).style('text-anchor', 'middle').style('fill', 'rgb(170, 170, 170)').style('display', 'inline-flex').attr('x', this.settings.label_padding / 2).attr('y', this.settings.label_padding / 2.5).attr('dy', function () {\n return Math.floor(_this7.settings.width / 100) / 2.5;\n }).attr('font-size', function () {\n return Math.floor(_this7.settings.label_padding / 2.5) + 'px';\n }).html('←');\n button.transition().duration(this.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1);\n }\n /**\n * Transition and remove items and labels related to global overview\n */\n\n }, {\n key: \"removeGlobalOverview\",\n value: function removeGlobalOverview() {\n this.items.selectAll('.item-block-year').transition().duration(this.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0).remove();\n this.labels.selectAll('.label-year').remove();\n }\n /**\n * Transition and remove items and labels related to year overview\n */\n\n }, {\n key: \"removeYearOverview\",\n value: function removeYearOverview() {\n this.items.selectAll('.item-circle').transition().duration(this.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0).remove();\n this.labels.selectAll('.label-day').remove();\n this.labels.selectAll('.label-month').remove();\n this.hideBackButton();\n }\n /**\n * Transition and remove items and labels related to month overview\n */\n\n }, {\n key: \"removeMonthOverview\",\n value: function removeMonthOverview() {\n var _this8 = this;\n\n this.items.selectAll('.item-block-month').selectAll('.item-block-rect').transition().duration(this.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0).attr('x', function (d, i) {\n return i % 2 === 0 ? -_this8.settings.width / 3 : _this8.settings.width / 3;\n }).remove();\n this.labels.selectAll('.label-day').remove();\n this.labels.selectAll('.label-week').remove();\n this.hideBackButton();\n }\n /**\n * Transition and remove items and labels related to week overview\n */\n\n }, {\n key: \"removeWeekOverview\",\n value: function removeWeekOverview() {\n var _this9 = this;\n\n this.items.selectAll('.item-block-week').selectAll('.item-block-rect').transition().duration(this.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0).attr('x', function (d, i) {\n return i % 2 === 0 ? -_this9.settings.width / 3 : _this9.settings.width / 3;\n }).remove();\n this.labels.selectAll('.label-day').remove();\n this.labels.selectAll('.label-week').remove();\n this.hideBackButton();\n }\n /**\n * Transition and remove items and labels related to daily overview\n */\n\n }, {\n key: \"removeDayOverview\",\n value: function removeDayOverview() {\n var _this10 = this;\n\n this.items.selectAll('.item-block').transition().duration(this.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0).attr('x', function (d, i) {\n return i % 2 === 0 ? -_this10.settings.width / 3 : _this10.settings.width / 3;\n }).remove();\n this.labels.selectAll('.label-time').remove();\n this.labels.selectAll('.label-project').remove();\n this.hideBackButton();\n }\n /**\n * Helper function to hide the tooltip\n */\n\n }, {\n key: \"hideTooltip\",\n value: function hideTooltip() {\n this.tooltip.transition().duration(this.settings.transition_duration / 2).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0);\n }\n /**\n * Helper function to hide the back button\n */\n\n }, {\n key: \"hideBackButton\",\n value: function hideBackButton() {\n this.buttons.selectAll('.button').transition().duration(this.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0).remove();\n }\n /**\n * Helper function to convert seconds to a human readable format\n * @param seconds Integer\n */\n\n }, {\n key: \"formatTime\",\n value: function formatTime(seconds) {\n var hours = Math.floor(seconds / 3600);\n var minutes = Math.floor((seconds - hours * 3600) / 60);\n var time = '';\n\n if (hours > 0) {\n time += hours === 1 ? '1 hour ' : hours + ' hours ';\n }\n\n if (minutes > 0) {\n time += minutes === 1 ? '1 minute' : minutes + ' minutes';\n }\n\n if (hours === 0 && minutes === 0) {\n time = Math.round(seconds) + ' seconds';\n }\n\n return time;\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this11 = this;\n\n return react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](CalendarChartWrapper, {\n id: \"calendar-heatmap\",\n className: _calendar_heatmap_css__WEBPACK_IMPORTED_MODULE_4___default.a.calendarHeatmap,\n ref: function ref(elem) {\n _this11.container = elem;\n }\n });\n }\n }]);\n\n return CalendarHeatmap;\n}(react__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\nCalendarHeatmap.defaultProps = {\n data: [],\n overview: 'year',\n color: '#ff4500',\n handler: undefined\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (CalendarHeatmap);\n\n//# sourceURL=webpack://%5Bname%5D/./src/calendar_visualization/calendar-heatmap.component.js?")},"./src/calendar_visualization/calendar-heatmap.css": +/*! exports provided: default */function(module,__webpack_exports__,__webpack_require__){"use strict";eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! d3 */ \"./node_modules/d3/index.js\");\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _calendar_heatmap_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./calendar-heatmap.css */ \"./src/calendar_visualization/calendar-heatmap.css\");\n/* harmony import */ var _calendar_heatmap_css__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_calendar_heatmap_css__WEBPACK_IMPORTED_MODULE_4__);\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral([\"\\n font-family: \\\"Open Sans\\\", \\\"Noto Sans JP\\\", \\\"Noto Sans\\\", \\\"Noto Sans CJK KR\\\",\\n Helvetica, Arial, sans-serif;\\n color: #3a4245;\\n height: 100%;\\n justify-content: center;\\n align-items: center;\\n text-align: center;\\n\"]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\n\n\n\n\n\nvar CalendarChartWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3__[\"default\"].div(_templateObject()); //display: flex;\n//flex-direction: column;\n\nvar CalendarHeatmap =\n/*#__PURE__*/\nfunction (_React$Component) {\n _inherits(CalendarHeatmap, _React$Component);\n\n function CalendarHeatmap(props) {\n var _this;\n\n _classCallCheck(this, CalendarHeatmap);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(CalendarHeatmap).call(this, props));\n _this.settings = {\n gutter: 5,\n item_gutter: 1,\n width: 1000,\n height: 2500,\n item_size: 10,\n label_padding: 40,\n max_block_height: 20,\n transition_duration: 500,\n tooltip_width: 250,\n tooltip_padding: 15\n };\n _this.in_transition = false;\n _this.overview = _this.props.overview;\n _this.history = ['global'];\n _this.selected = {};\n _this.calcDimensions = _this.calcDimensions.bind(_assertThisInitialized(_this));\n return _this;\n }\n\n _createClass(CalendarHeatmap, [{\n key: \"componentDidUpdate\",\n value: function componentDidUpdate() {\n // Delete the previous visualization and create a new one with the new props\n // change color, change dates, \n this.cleanPreviousObjects();\n this.createElements();\n this.createAddons();\n }\n }, {\n key: \"cleanPreviousObjects\",\n value: function cleanPreviousObjects() {\n var titlesel = d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"]('#calendar-heatmap').select(\"svg\"); // titlesel.select(\"#TitleLabel\").remove();\n // titlesel.select(\"#DatesBound\").remove(); \n\n titlesel.remove();\n }\n }, {\n key: \"createAddons\",\n value: function createAddons() // RGB: changing component to allow center title an other information related to the visualization\n {\n var titlesel = d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"]('#calendar-heatmap').select(\"svg\"); //var newsvg = titlesel.append(\"svg\");\n\n var element = titlesel.node();\n var posx = element.getBoundingClientRect().width;\n var posy = element.getBoundingClientRect().height; // console.log(posy);\n\n var sdate = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.props.startdate).format('MMMM Do YYYY');\n var edate = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.props.enddate).format('MMMM Do YYYY'); // console.log(\"Show DR \" + this.props.show_date_range);\n\n if (this.props.show_date_range == true) {\n // console.log(\"DR\");\n // let h1 = this.svg.attr('height');\n // this.svg.attr('height', h1 + 15);\n titlesel.append(\"text\").text(\"\" + sdate + \" to \" + edate).attr(\"transform\", \"translate(\" + posx / 2 + \",\" + (posy - 65) + \")\").attr(\"text-anchor\", \"middle\").style(\"position\", \"absolute\").attr(\"font-size\", this.props.font_size_date).attr(\"id\", \"DatesBound\").attr(\"fill\", \"#3a4245\").attr(\"class\", \"looker-vis-context-value-text\");\n } // console.log(\"Show Title \" + this.props.show_date_range);\n\n\n if (this.props.show_title == true) {\n // console.log(\"Title\");\n // let h1 = this.svg.attr('height');\n // this.svg.attr('height', h1 + 15);\n titlesel.append(\"text\").text(this.props.title).attr(\"transform\", \"translate(\" + posx / 2 + \",\" + (posy - 40) + \")\").attr(\"text-anchor\", \"middle\").style(\"position\", \"absolute\").attr(\"font-size\", this.props.font_size_title).attr(\"id\", \"TitleLabel\") //.attr(\"font-weight\", 100)\n .attr(\"fill\", \"#3a4245\").attr(\"class\", \"looker-vis-context-title-text\");\n }\n }\n }, {\n key: \"componentDidMount\",\n value: function componentDidMount() {\n this.createElements();\n this.parseData();\n this.drawChart();\n this.createAddons();\n window.addEventListener('resize', this.calcDimensions);\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n window.removeEventListener('resize', this.calcDimensions);\n }\n }, {\n key: \"createElements\",\n value: function createElements() {\n // Create svg element\n this.svg = d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"]('#calendar-heatmap').append('svg').attr('class', 'svg'); // Create other svg elements\n\n this.items = this.svg.append('g');\n this.labels = this.svg.append('g');\n this.buttons = this.svg.append('g'); // Add tooltip to the same element as main svg\n // this.tooltip = d3.select('#calendar-heatmap')\n // .append('div')\n // .attr('class', styles.heatmapTooltip)\n // .style('opacity', 0)\n // .style('pointer-events', 'none')\n // .style('position', 'absolute')\n // .style('z-index', 9999)\n // .style('width', '250px')\n // .style('max-width', '250px')\n // .style('overflow', 'hidden')\n // .style('padding', '15px')\n // .style('font-size', '12px')\n // .style('line-height', '14px')\n // .style('color', 'rgb(51, 51, 51)')\n // .style('background', 'rgba(255, 255, 255, 0.75)')\n\n this.tooltip = d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"]('#calendar-heatmap').append('div').attr(\"id\", \"tooltip\").attr(\"class\", _calendar_heatmap_css__WEBPACK_IMPORTED_MODULE_4___default.a.heatmapTooltip).style(\"opacity\", 1).style(\"position\", \"absolute\").style(\"text-align\", \"center\").style(\"padding\", \".5rem\").style(\"color\", \"#313639\").style(\"border-radius\", \"#8px\");\n this.calcDimensions();\n } // Calculate dimensions based on available width\n\n }, {\n key: \"calcDimensions\",\n value: function calcDimensions() {\n var dayIndex = Math.round((moment__WEBPACK_IMPORTED_MODULE_1___default()() - moment__WEBPACK_IMPORTED_MODULE_1___default()().subtract(1, 'year').startOf('week')) / 86400000);\n var colIndex = Math.trunc(dayIndex / 7);\n var numWeeks = colIndex + 1;\n this.settings.width = this.container.offsetWidth < 1000 ? 1000 : this.container.offsetWidth;\n this.settings.item_size = (this.settings.width - this.settings.label_padding) / numWeeks - this.settings.gutter;\n this.settings.height = this.settings.label_padding + 7 * (this.settings.item_size + this.settings.gutter);\n this.svg.attr('width', this.settings.width).attr('height', this.settings.height + 80); // RGB: adding extra space for titles and additional labels\n\n this.parseData();\n\n if (!!this.props.data && !!this.props.data[0].summary) {\n // console.log(\"happening\");\n this.drawChart();\n }\n }\n }, {\n key: \"parseData\",\n value: function parseData() {\n this.props.data.map(function (d) {\n var summary = d.details.reduce(function (uniques, project) {\n if (!uniques[project.name]) {\n uniques[project.name] = {\n 'value': project.value\n };\n } else {\n uniques[project.name].value += project.value;\n }\n\n return uniques;\n }, {});\n var unsorted_summary = Object.keys(summary).map(function (key) {\n return {\n 'name': key,\n 'value': summary[key].value\n };\n });\n d.summary = unsorted_summary.sort(function (a, b) {\n return b.value - a.value;\n });\n return d;\n });\n }\n }, {\n key: \"drawChart\",\n value: function drawChart() {\n // console.log(this.overview);\n if (this.overview === 'global') {\n this.drawGlobalOverview();\n } else if (this.overview === 'year') {\n this.drawYearOverview();\n } else if (this.overview === 'month') {\n this.drawMonthOverview();\n } else if (this.overview === 'week') {\n this.drawWeekOverview();\n } else if (this.overview === 'day') {\n this.drawDayOverview();\n }\n }\n /**\n * Draw global overview (multiple years)\n */\n\n }, {\n key: \"drawGlobalOverview\",\n value: function drawGlobalOverview() {\n var _this2 = this;\n\n // Add current overview to the history\n if (this.history[this.history.length - 1] !== this.overview) {\n this.history.push(this.overview);\n } // Define start and end of the dataset\n\n\n var start = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.props.data[0].date).startOf('year');\n var end = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.props.data[this.props.data.length - 1].date).endOf('year'); // Define array of years and total values\n\n var year_data = d3__WEBPACK_IMPORTED_MODULE_2__[\"timeYears\"](start, end).map(function (d) {\n var date = moment__WEBPACK_IMPORTED_MODULE_1___default()(d);\n\n var getSummary = function getSummary() {\n var summary = _this2.props.data.reduce(function (summary, d) {\n if (moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).year() === date.year()) {\n d.summary.map(function (item) {\n if (!summary[item.name]) {\n summary[item.name] = {\n 'value': item.value\n };\n } else {\n summary[item.name].value += item.value;\n }\n });\n }\n\n return summary;\n }, {});\n\n var unsorted_summary = Object.keys(summary).map(function (key) {\n return {\n 'name': key,\n 'value': summary[key].value\n };\n });\n return unsorted_summary.sort(function (a, b) {\n return b.value - a.value;\n });\n };\n\n return {\n 'date': date,\n 'total': _this2.props.data.reduce(function (prev, current) {\n if (moment__WEBPACK_IMPORTED_MODULE_1___default()(current.date).year() === date.year()) {\n prev += current.total;\n }\n\n return prev;\n }, 0),\n 'summary': getSummary()\n };\n }); // Calculate max value of all the years in the dataset\n\n var max_value = d3__WEBPACK_IMPORTED_MODULE_2__[\"max\"](year_data, function (d) {\n return d.total;\n }); //console.log(year_data);\n // Define year labels and axis\n\n var year_labels = d3__WEBPACK_IMPORTED_MODULE_2__[\"timeYears\"](start, end).map(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d);\n });\n var yearScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleBand\"]().rangeRound([0, this.settings.width]).padding([0.05]).domain(year_labels.map(function (d) {\n return d.year();\n })); // Add global data items to the overview\n\n this.items.selectAll('.item-block-year').remove();\n var item_block = this.items.selectAll('.item-block-year').data(year_data).enter().append('rect').attr('class', 'item item-block-year').style('cursor', 'pointer').attr('width', function () {\n return (_this2.settings.width - _this2.settings.label_padding) / year_labels.length - _this2.settings.gutter * 5;\n }).attr('height', function () {\n return _this2.settings.height - _this2.settings.label_padding;\n }).attr('transform', function (d) {\n return 'translate(' + yearScale(d.date.year()) + ',' + _this2.settings.tooltip_padding * 2 + ')';\n }).attr('fill', function (d) {\n var color = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleLinear\"]().range(['#ffffff', _this2.props.color]).domain([-0.15 * max_value, max_value]);\n return color(d.total) || '#ff4500';\n }).on('click', function (d) {\n if (_this2.in_transition) {\n return;\n } // Set in_transition flag\n\n\n _this2.in_transition = true; // Set selected date to the one clicked on\n\n _this2.selected = d; // Hide tooltip\n\n _this2.hideTooltip(); // Remove all global overview related items and labels\n\n\n _this2.removeGlobalOverview(); // Redraw the chart\n\n\n _this2.overview = 'year';\n\n _this2.drawChart();\n }).style('opacity', 0).on('mousemove', function (d) {\n if (_this2.in_transition) {\n return;\n }\n\n var tooltip_html = '';\n tooltip_html += '
Total: ';\n tooltip_html += '' + d.total + '';\n tooltip_html += ' ' + _this2.props.totmeasure + '
';\n\n _this2.tooltip.html(tooltip_html); // console.log(Math.round(Number(d3.select(\"#tooltip\").style('width').slice(0, -2))));\n\n\n _this2.tooltip.style(\"left\", event.pageX - Math.round(Number(_this2.tooltip.style('width').slice(0, -2))) / 2 + \"px\").style(\"top\", event.pageY - 50 + \"px\").style('opacity', 1).style(\"position\", \"absolute\").style(\"text-align\", \"center\").style(\"padding\", \".5rem\").style('font-size', '.8rem').style('pointer-events', 'none').style(\"color\", \"white\").style(\"background-color\", \"#313639\").style(\"background-opacity\", \".85\").style(\"border-radius\", \"#8px\");\n\n _this2.tooltip.append('div').style('border-right', 'solid 8px transparent').style('border-left', 'solid 8px transparent').style('border-top', 'solid 8px #313639').style('transform', 'translateX(-50%)').style('content', '').style('top', '100%').style('left', \"50%\").style('height', 5).style('width', 5).style('position', 'absolute');\n }).on('mouseout', function () {\n if (_this2.in_transition) {\n return;\n }\n\n _this2.hideTooltip();\n }).transition().delay(function (d, i) {\n return _this2.settings.transition_duration * (i + 1) / 10;\n }).duration(function () {\n return _this2.settings.transition_duration;\n }).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1).call(function (transition, callback) {\n if (transition.empty()) {\n callback();\n }\n\n var n = 0;\n transition.each(function () {\n ++n;\n }).on('end', function () {\n if (! --n) {\n callback.apply(this, arguments);\n }\n });\n }, function () {\n _this2.in_transition = false;\n }); // Add year labels\n\n this.labels.selectAll('.label-year').remove();\n this.labels.selectAll('.label-year').data(year_labels).enter().append('text').attr('class', 'label label-year').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('font-size', function () {\n return Math.floor(_this2.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return d.year();\n }).attr('x', function (d) {\n return yearScale(d.year());\n }).attr('y', this.settings.label_padding / 2).on('mouseenter', function (year_label) {\n if (_this2.in_transition) {\n return;\n }\n\n _this2.items.selectAll('.item-block-year').transition().duration(_this2.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).year() === year_label.year() ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this2.in_transition) {\n return;\n }\n\n _this2.items.selectAll('.item-block-year').transition().duration(_this2.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1);\n }).on('click', function (d) {\n if (_this2.in_transition) {\n return;\n } // Set in_transition flag\n\n\n _this2.in_transition = true; // Set selected year to the one clicked on\n\n _this2.selected = {\n date: d\n }; // Hide tooltip\n\n _this2.hideTooltip(); // Remove all global overview related items and labels\n\n\n _this2.removeGlobalOverview(); // Redraw the chart\n\n\n _this2.overview = 'year';\n\n _this2.drawChart();\n });\n }\n /**\n * Draw year overview\n */\n\n }, {\n key: \"drawYearOverview\",\n value: function drawYearOverview() {\n var _this3 = this;\n\n // Add current overview to the history\n if (this.history[this.history.length - 1] !== this.overview) {\n this.history.push(this.overview);\n } // Define start and end date of the selected year\n\n\n var start_of_year = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).startOf('year');\n var end_of_year = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).endOf('year'); // Filter data down to the selected year\n\n var year_data = this.props.data.filter(function (d) {\n return start_of_year <= moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date) && moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date) < end_of_year;\n }); // Calculate max value of the year data\n\n var max_value = d3__WEBPACK_IMPORTED_MODULE_2__[\"max\"](year_data, function (d) {\n return d.total;\n }); //let min_value = d3.min(year_data,d => d.total)\n\n var color = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleLinear\"]().range(['#ffffff', this.props.color]).domain([-0.15 * max_value, max_value]);\n\n var calcItemX = function calcItemX(d) {\n var date = moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date);\n var dayIndex = Math.round((date - moment__WEBPACK_IMPORTED_MODULE_1___default()(start_of_year).startOf('week')) / 86400000);\n var colIndex = Math.trunc(dayIndex / 7);\n return colIndex * (_this3.settings.item_size + _this3.settings.gutter) + _this3.settings.label_padding;\n };\n\n var calcItemY = function calcItemY(d) {\n return _this3.settings.label_padding + moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).weekday() * (_this3.settings.item_size + _this3.settings.gutter);\n };\n\n var calcItemSize = function calcItemSize(d) {\n if (max_value <= 0) {\n return _this3.settings.item_size;\n }\n\n return _this3.settings.item_size * 0.75 + _this3.settings.item_size * d.total / max_value * 0.25;\n };\n\n this.items.selectAll('.item-circle').remove();\n this.items.selectAll('.item-circle').data(year_data).enter().append('rect').attr('class', 'item item-circle').style('cursor', 'pointer').style('opacity', 0).attr('x', function (d) {\n return calcItemX(d) + (_this3.settings.item_size - calcItemSize(d)) / 2;\n }).attr('y', function (d) {\n return calcItemY(d) + (_this3.settings.item_size - calcItemSize(d)) / 2;\n }).attr('rx', function (d) {\n return calcItemSize(d);\n }).attr('ry', function (d) {\n return calcItemSize(d);\n }).attr('width', function (d) {\n return calcItemSize(d);\n }).attr('height', function (d) {\n return calcItemSize(d);\n }).attr('fill', function (d) {\n return d.total > 0 ? color(d.total) : 'transparent';\n }) // .on('click', d => {\n // if (this.in_transition) { return }\n // // Don't transition if there is no data to show\n // if (d.total === 0) { return }\n // this.in_transition = true\n // // Set selected date to the one clicked on\n // this.selected = d\n // // Hide tooltip\n // this.hideTooltip()\n // // Remove all year overview related items and labels\n // this.removeYearOverview()\n // // Redraw the chart\n // this.overview = 'day'\n // this.drawChart()\n // })\n .on('mousemove', function (d) {\n if (_this3.in_transition) {\n return;\n } // Pulsating animation\n\n\n var circle = d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](d3__WEBPACK_IMPORTED_MODULE_2__[\"event\"].currentTarget);\n\n var repeat = function repeat() {\n circle = circle.transition().duration(_this3.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).attr('x', function (d) {\n return calcItemX(d) - (_this3.settings.item_size * 1.1 - _this3.settings.item_size) / 2;\n }).attr('y', function (d) {\n return calcItemY(d) - (_this3.settings.item_size * 1.1 - _this3.settings.item_size) / 2;\n }).attr('width', _this3.settings.item_size * 1.1).attr('height', _this3.settings.item_size * 1.1).transition().duration(_this3.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).attr('x', function (d) {\n return calcItemX(d) + (_this3.settings.item_size - calcItemSize(d)) / 2;\n }).attr('y', function (d) {\n return calcItemY(d) + (_this3.settings.item_size - calcItemSize(d)) / 2;\n }).attr('width', function (d) {\n return calcItemSize(d);\n }).attr('height', function (d) {\n return calcItemSize(d);\n }).on('end', repeat);\n };\n\n repeat(); //RGB: Changes on the tooltip (hint) displayed in the monthly - day view\n // Construct tooltip\n\n var tooltip_html = ''; //tooltip_html += `
${d.total ? this.formatTime(d.total) : 'No time'} tracked
`\n\n tooltip_html += \"
\").concat(d.total ? d.total : 'No entries for ', \" \");\n tooltip_html += ' Total ' + _this3.props.measure + '

';\n tooltip_html += '
' + moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).format('dddd, MMM Do YYYY') + '
'; // Add summary to the tooltip\n // let counter = 0\n // console.log(d);\n // while ( counter < d.summary.length ) {\n // tooltip_html += '
' + d.summary[counter].name + ':'\n // //tooltip_html += '' + this.formatTime(d.summary[counter].value) + '
'\n // tooltip_html += ' ' + d.summary[counter].value+ ''\n // tooltip_html += ' ' + this.props.measure + '
'\n // counter++\n // }\n // Calculate tooltip position\n\n var x = calcItemX(d) + _this3.settings.item_size;\n\n if (_this3.settings.width - x < _this3.settings.tooltip_width + _this3.settings.tooltip_padding * 3) {\n x -= _this3.settings.tooltip_width + _this3.settings.tooltip_padding * 2;\n }\n\n var y = calcItemY(d) + _this3.settings.item_size; // Show tooltip\n\n\n _this3.tooltip.html(tooltip_html); // console.log(Math.round(Number(d3.select(\"#tooltip\").style('width').slice(0, -2))));\n\n\n _this3.tooltip.style(\"left\", event.pageX - Math.round(Number(_this3.tooltip.style('width').slice(0, -2))) / 2 - 5 + \"px\").style(\"top\", event.pageY - 100 + \"px\").transition().duration(50).style('opacity', .9).style('pointer-events', 'none').style(\"position\", \"absolute\").style(\"text-align\", \"center\").style(\"padding\", \".5rem\").style(\"color\", \"white\").style(\"background-color\", \"#313639\").style(\"background-opacity\", \".75\").style(\"border-radius\", \"#8px\");\n\n _this3.tooltip.append('div').style('border-right', 'solid 8px transparent').style('border-left', 'solid 8px transparent').style('border-top', 'solid 8px #313639').style('transform', 'translateX(-50%)').style('content', '').style('top', '100%').style('left', \"50%\").style('height', 5).style('width', 5).style('position', 'absolute');\n }).on('mouseout', function () {\n if (_this3.in_transition) {\n return;\n } // Set circle radius back to what its supposed to be\n\n\n d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](d3__WEBPACK_IMPORTED_MODULE_2__[\"event\"].currentTarget).transition().duration(_this3.settings.transition_duration / 2).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).attr('x', function (d) {\n return calcItemX(d) + (_this3.settings.item_size - calcItemSize(d)) / 2;\n }).attr('y', function (d) {\n return calcItemY(d) + (_this3.settings.item_size - calcItemSize(d)) / 2;\n }).attr('width', function (d) {\n return calcItemSize(d);\n }).attr('height', function (d) {\n return calcItemSize(d);\n }); // Hide tooltip\n\n _this3.hideTooltip();\n }).transition().delay(function () {\n return (Math.cos(Math.PI * Math.random()) + 1) * _this3.settings.transition_duration;\n }).duration(function () {\n return _this3.settings.transition_duration;\n }).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1).call(function (transition, callback) {\n if (transition.empty()) {\n callback();\n }\n\n var n = 0;\n transition.each(function () {\n return ++n;\n }).on('end', function () {\n if (! --n) {\n callback.apply(this, arguments);\n }\n });\n }, function () {\n _this3.in_transition = false;\n }); // Add month labels\n\n var month_labels = d3__WEBPACK_IMPORTED_MODULE_2__[\"timeMonths\"](start_of_year, end_of_year);\n var monthScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleLinear\"]().range([0, this.settings.width]).domain([0, month_labels.length]);\n this.labels.selectAll('.label-month').remove();\n this.labels.selectAll('.label-month').data(month_labels).enter().append('text').attr('class', 'label label-month').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('font-size', function () {\n return Math.floor(_this3.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return d.toLocaleDateString('en-us', {\n month: 'short'\n });\n }).attr('x', function (d, i) {\n return monthScale(i) + (monthScale(i) - monthScale(i - 1)) / 2;\n }).attr('y', this.settings.label_padding / 2).on('mouseenter', function (d) {\n if (_this3.in_transition) {\n return;\n }\n\n var selected_month = moment__WEBPACK_IMPORTED_MODULE_1___default()(d);\n\n _this3.items.selectAll('.item-circle').transition().duration(_this3.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).isSame(selected_month, 'month') ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this3.in_transition) {\n return;\n }\n\n _this3.items.selectAll('.item-circle').transition().duration(_this3.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1);\n }).on('click', function (d) {\n if (_this3.in_transition) {\n return;\n } // Check month data\n\n\n var month_data = _this3.props.data.filter(function (e) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d).startOf('month') <= moment__WEBPACK_IMPORTED_MODULE_1___default()(e.date) && moment__WEBPACK_IMPORTED_MODULE_1___default()(e.date) < moment__WEBPACK_IMPORTED_MODULE_1___default()(d).endOf('month');\n }); // Don't transition if there is no data to show\n\n\n if (!month_data.length) {\n return;\n } // Set selected month to the one clicked on\n\n\n _this3.selected = {\n date: d\n };\n _this3.in_transition = true; // Hide tooltip\n\n _this3.hideTooltip(); // Remove all year overview related items and labels\n\n\n _this3.removeYearOverview(); // Redraw the chart\n\n\n _this3.overview = 'month';\n\n _this3.drawChart();\n }); // Add day labels\n\n var day_labels = d3__WEBPACK_IMPORTED_MODULE_2__[\"timeDays\"](moment__WEBPACK_IMPORTED_MODULE_1___default()().startOf('week'), moment__WEBPACK_IMPORTED_MODULE_1___default()().endOf('week'));\n var dayScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleBand\"]().rangeRound([this.settings.label_padding, this.settings.height]).domain(day_labels.map(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d).weekday();\n }));\n this.labels.selectAll('.label-day').remove();\n this.labels.selectAll('.label-day').data(day_labels).enter().append('text').attr('class', 'label label-day').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('x', this.settings.label_padding / 3).attr('y', function (d, i) {\n return dayScale(i) + dayScale.bandwidth() / 1.75;\n }).style('text-anchor', 'left').attr('font-size', function () {\n return Math.floor(_this3.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d).format('dddd')[0];\n }).on('mouseenter', function (d) {\n if (_this3.in_transition) {\n return;\n }\n\n var selected_day = moment__WEBPACK_IMPORTED_MODULE_1___default()(d);\n\n _this3.items.selectAll('.item-circle').transition().duration(_this3.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).day() === selected_day.day() ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this3.in_transition) {\n return;\n }\n\n _this3.items.selectAll('.item-circle').transition().duration(_this3.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1);\n }); // Add button to switch back to previous overview\n\n this.drawButton();\n }\n /**\n * Draw month overview\n */\n\n }, {\n key: \"drawMonthOverview\",\n value: function drawMonthOverview() {\n var _this4 = this;\n\n // Add current overview to the history\n if (this.history[this.history.length - 1] !== this.overview) {\n this.history.push(this.overview);\n } // Define beginning and end of the month\n\n\n var start_of_month = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).startOf('month');\n var end_of_month = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).endOf('month'); // Filter data down to the selected month\n\n var month_data = this.props.data.filter(function (d) {\n return start_of_month <= moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date) && moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date) < end_of_month;\n });\n var max_value = d3__WEBPACK_IMPORTED_MODULE_2__[\"max\"](month_data, function (d) {\n return d3__WEBPACK_IMPORTED_MODULE_2__[\"max\"](d.summary, function (d) {\n return d.value;\n });\n }); // Define day labels and axis\n\n var day_labels = d3__WEBPACK_IMPORTED_MODULE_2__[\"timeDays\"](moment__WEBPACK_IMPORTED_MODULE_1___default()().startOf('week'), moment__WEBPACK_IMPORTED_MODULE_1___default()().endOf('week'));\n var dayScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleBand\"]().rangeRound([this.settings.label_padding, this.settings.height]).domain(day_labels.map(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d).weekday();\n })); // Define week labels and axis\n\n var week_labels = [start_of_month.clone()];\n\n while (start_of_month.week() !== end_of_month.week()) {\n week_labels.push(start_of_month.add(1, 'week').clone());\n }\n\n var weekScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleBand\"]().rangeRound([this.settings.label_padding, this.settings.width]).padding([0.05]).domain(week_labels.map(function (weekday) {\n return weekday.week();\n })); // Add month data items to the overview\n\n this.items.selectAll('.item-block-month').remove();\n var item_block = this.items.selectAll('.item-block-month').data(month_data).enter().append('g').attr('class', 'item item-block-month').style('cursor', 'pointer').attr('width', function () {\n return (_this4.settings.width - _this4.settings.label_padding) / week_labels.length - _this4.settings.gutter * 5;\n }).attr('height', function () {\n return Math.min(dayScale.bandwidth(), _this4.settings.max_block_height);\n }).attr('transform', function (d) {\n return 'translate(' + weekScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).week()) + ',' + (dayScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).weekday()) + dayScale.bandwidth() / 1.75 - 15) + ')';\n }).attr('total', function (d) {\n return d.total;\n }).attr('date', function (d) {\n return d.date;\n }).attr('offset', 0); // .on('click', d => {\n // if (this.in_transition) { return }\n // // Don't transition if there is no data to show\n // if (d.total === 0) { return }\n // this.in_transition = true\n // // Set selected date to the one clicked on\n // this.selected = d\n // // Hide tooltip\n // this.hideTooltip()\n // // Remove all month overview related items and labels\n // this.removeMonthOverview()\n // // Redraw the chart\n // this.overview = 'day'\n // this.drawChart()\n // })\n\n var item_width = (this.settings.width - this.settings.label_padding) / week_labels.length - this.settings.gutter * 5;\n var itemScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleLinear\"]().rangeRound([0, item_width]);\n var item_gutter = this.settings.item_gutter;\n item_block.selectAll('.item-block-rect').data(function (d) {\n return d.summary;\n }).enter().append('rect').attr('class', 'item item-block-rect').style('cursor', 'pointer').attr('x', function (d) {\n var total = parseInt(d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this.parentNode).attr('total'));\n var offset = parseInt(d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this.parentNode).attr('offset'));\n itemScale.domain([0, total]);\n d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this.parentNode).attr('offset', offset + itemScale(d.value));\n return offset;\n }).attr('width', function (d) {\n var total = parseInt(d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this.parentNode).attr('total'));\n itemScale.domain([0, total]);\n return Math.max(itemScale(d.value) - item_gutter, 1);\n }).attr('height', function () {\n return Math.min(dayScale.bandwidth(), _this4.settings.max_block_height);\n }).attr('fill', function (d) {\n var color = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleLinear\"]().range(['#ffffff', _this4.props.color]).domain([-0.15 * max_value, max_value]);\n return color(d.value) || '#ff4500';\n }).style('opacity', 0).on('mousemove', function (d) {\n if (_this4.in_transition) {\n return;\n } // Get date from the parent node\n\n\n var parentNode = d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](d3__WEBPACK_IMPORTED_MODULE_2__[\"event\"].currentTarget.parentNode);\n var date = new Date(parentNode.attr('date')); //RGB: Changes on the label to use the props parameter \n // Construct tooltip\n\n var tooltip_html = ''; // tooltip_html += '
' + (d.value ? this.formatTime(d.value) : 'No time') + ' tracked
'\n\n tooltip_html += '
' + (d.value ? d.value : 'No entries for') + ' ' + _this4.props.measure + '
'; //tooltip_html += ' Total ' + this.props.measure + '
'\n\n tooltip_html += '
' + moment__WEBPACK_IMPORTED_MODULE_1___default()(date).format('dddd, MMM Do YYYY') + '
'; // Calculate tooltip position\n\n var x = weekScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(date).week()) + _this4.settings.tooltip_padding;\n\n while (_this4.settings.width - x < _this4.settings.tooltip_width + _this4.settings.tooltip_padding * 3) {\n x -= 10;\n }\n\n var y = dayScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(date).weekday()) + _this4.settings.tooltip_padding * 2; // Show tooltip\n\n _this4.tooltip.html(tooltip_html);\n\n _this4.tooltip.style(\"left\", event.pageX - Math.round(Number(_this4.tooltip.style('width').slice(0, -2))) / 2 + \"px\").style(\"top\", event.pageY - 70 + \"px\").transition().duration(50).style('opacity', .9).style('pointer-events', 'none').style(\"position\", \"absolute\").style(\"text-align\", \"center\").style(\"padding\", \".5rem\").style(\"color\", \"white\").style(\"background-color\", \"#313639\").style(\"background-opacity\", \".75\").style(\"border-radius\", \"#8px\");\n\n _this4.tooltip.append('div').style('border-right', 'solid 8px transparent').style('border-left', 'solid 8px transparent').style('border-top', 'solid 8px #313639').style('transform', 'translateX(-50%)').style('content', '').style('top', '100%').style('left', \"50%\").style('height', 5).style('width', 5).style('position', 'absolute');\n }).on('mouseout', function () {\n if (_this4.in_transition) {\n return;\n }\n\n _this4.hideTooltip();\n }).transition().delay(function () {\n return (Math.cos(Math.PI * Math.random()) + 1) * _this4.settings.transition_duration;\n }).duration(function () {\n return _this4.settings.transition_duration;\n }).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1).call(function (transition, callback) {\n if (transition.empty()) {\n callback();\n }\n\n var n = 0;\n transition.each(function () {\n return ++n;\n }).on('end', function () {\n if (! --n) {\n callback.apply(this, arguments);\n }\n });\n }, function () {\n _this4.in_transition = false;\n }); // Add week labels\n\n this.labels.selectAll('.label-week').remove();\n this.labels.selectAll('.label-week').data(week_labels).enter().append('text').attr('class', 'label label-week').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('font-size', function () {\n return Math.floor(_this4.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return 'Week ' + d.week();\n }).attr('x', function (d) {\n return weekScale(d.week());\n }).attr('y', this.settings.label_padding / 2).on('mouseenter', function (weekday) {\n if (_this4.in_transition) {\n return;\n }\n\n _this4.items.selectAll('.item-block-month').transition().duration(_this4.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).week() === weekday.week() ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this4.in_transition) {\n return;\n }\n\n _this4.items.selectAll('.item-block-month').transition().duration(_this4.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1);\n }).on('click', function (d) {\n if (_this4.in_transition) {\n return;\n } // Check week data\n\n\n var week_data = _this4.props.data.filter(function (e) {\n return d.startOf('week') <= moment__WEBPACK_IMPORTED_MODULE_1___default()(e.date) && moment__WEBPACK_IMPORTED_MODULE_1___default()(e.date) < d.endOf('week');\n }); // Don't transition if there is no data to show\n\n\n if (!week_data.length) {\n return;\n }\n\n _this4.in_transition = true; // Set selected month to the one clicked on\n\n _this4.selected = {\n date: d\n }; // Hide tooltip\n\n _this4.hideTooltip(); // Remove all year overview related items and labels\n\n\n _this4.removeMonthOverview(); // Redraw the chart\n\n\n _this4.overview = 'week';\n\n _this4.drawChart();\n }); // Add day labels\n\n this.labels.selectAll('.label-day').remove();\n this.labels.selectAll('.label-day').data(day_labels).enter().append('text').attr('class', 'label label-day').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('x', this.settings.label_padding / 3).attr('y', function (d, i) {\n return dayScale(i) + dayScale.bandwidth() / 1.75;\n }).style('text-anchor', 'left').attr('font-size', function () {\n return Math.floor(_this4.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d).format('dddd')[0];\n }).on('mouseenter', function (d) {\n if (_this4.in_transition) {\n return;\n }\n\n var selected_day = moment__WEBPACK_IMPORTED_MODULE_1___default()(d);\n\n _this4.items.selectAll('.item-block-month').transition().duration(_this4.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).day() === selected_day.day() ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this4.in_transition) {\n return;\n }\n\n _this4.items.selectAll('.item-block-month').transition().duration(_this4.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1);\n }); // Add button to switch back to previous overview\n\n this.drawButton();\n }\n /**\n * Draw week overview\n */\n\n }, {\n key: \"drawWeekOverview\",\n value: function drawWeekOverview() {\n var _this5 = this;\n\n // Add current overview to the history\n if (this.history[this.history.length - 1] !== this.overview) {\n this.history.push(this.overview);\n } // Define beginning and end of the week\n\n\n var start_of_week = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).startOf('week');\n var end_of_week = moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).endOf('week'); // Filter data down to the selected week\n\n var week_data = this.props.data.filter(function (d) {\n return start_of_week <= moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date) && moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date) < end_of_week;\n });\n var max_value = d3__WEBPACK_IMPORTED_MODULE_2__[\"max\"](week_data, function (d) {\n return d3__WEBPACK_IMPORTED_MODULE_2__[\"max\"](d.summary, function (d) {\n return d.value;\n });\n }); // Define day labels and axis\n\n var day_labels = d3__WEBPACK_IMPORTED_MODULE_2__[\"timeDays\"](moment__WEBPACK_IMPORTED_MODULE_1___default()().startOf('week'), moment__WEBPACK_IMPORTED_MODULE_1___default()().endOf('week'));\n var dayScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleBand\"]().rangeRound([this.settings.label_padding, this.settings.height]).domain(day_labels.map(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d).weekday();\n })); // Define week labels and axis\n\n var week_labels = [start_of_week];\n var weekScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleBand\"]().rangeRound([this.settings.label_padding, this.settings.width]).padding([0.01]).domain(week_labels.map(function (weekday) {\n return weekday.week();\n })); // Add week data items to the overview\n\n this.items.selectAll('.item-block-week').remove();\n var item_block = this.items.selectAll('.item-block-week').data(week_data).enter().append('g').attr('class', 'item item-block-week').style('cursor', 'pointer').attr('width', function () {\n return (_this5.settings.width - _this5.settings.label_padding) / week_labels.length - _this5.settings.gutter * 5;\n }).attr('height', function () {\n return Math.min(dayScale.bandwidth(), _this5.settings.max_block_height);\n }).attr('transform', function (d) {\n return 'translate(' + weekScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).week()) + ',' + (dayScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).weekday()) + dayScale.bandwidth() / 1.75 - 15) + ')';\n }).attr('total', function (d) {\n return d.total;\n }).attr('date', function (d) {\n return d.date;\n }).attr('offset', 0); // .on('click', d => {\n // if (this.in_transition) { return }\n // // Don't transition if there is no data to show\n // if (d.total === 0) { return }\n // this.in_transition = true\n // // Set selected date to the one clicked on\n // this.selected = d\n // // Hide tooltip\n // this.hideTooltip()\n // // Remove all week overview related items and labels\n // this.removeWeekOverview()\n // // Redraw the chart\n // this.overview = 'day'\n // this.drawChart()\n // })\n\n var item_width = (this.settings.width - this.settings.label_padding) / week_labels.length - this.settings.gutter * 5;\n var itemScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleLinear\"]().rangeRound([0, item_width]);\n var item_gutter = this.settings.item_gutter;\n item_block.selectAll('.item-block-week').data(function (d) {\n return d.summary;\n }).enter().append('rect').attr('class', 'item item-block-week').style('cursor', 'pointer').attr('x', function (d) {\n var total = parseInt(d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this.parentNode).attr('total'));\n var offset = parseInt(d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this.parentNode).attr('offset'));\n itemScale.domain([0, total]);\n d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this.parentNode).attr('offset', offset + itemScale(d.value));\n return offset;\n }).attr('width', function (d) {\n var total = parseInt(d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this.parentNode).attr('total'));\n itemScale.domain([0, total]);\n return Math.max(itemScale(d.value) - item_gutter, 1);\n }).attr('height', function () {\n return Math.min(dayScale.bandwidth(), _this5.settings.max_block_height);\n }).attr('fill', function (d) {\n var color = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleLinear\"]().range(['#ffffff', _this5.props.color]).domain([-0.15 * max_value, max_value]);\n return color(d.value) || '#ff4500';\n }).style('opacity', 0).on('mouseover', function (d) {\n if (_this5.in_transition) {\n return;\n } // Get date from the parent node\n\n\n var parentNode = d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](d3__WEBPACK_IMPORTED_MODULE_2__[\"event\"].currentTarget.parentNode);\n var date = new Date(parentNode.attr('date')); // RGB: Changes on tooltip to add the props parameters\n // Construct tooltip\n\n var tooltip_html = '';\n tooltip_html += '
' + (d.value ? d.value : 'No entries for') + ' ' + _this5.props.measure + '
'; // //tooltip_html += ' Total ' + this.props.measure + ''\n\n tooltip_html += '
' + moment__WEBPACK_IMPORTED_MODULE_1___default()(date).format('dddd, MMM Do YYYY') + '
'; // Calculate tooltip position\n\n var total = parseInt(parentNode.attr('total'));\n itemScale.domain([0, total]);\n var x = parseInt(d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](d3__WEBPACK_IMPORTED_MODULE_2__[\"event\"].currentTarget).attr('x')) + itemScale(d.value) / 4 + _this5.settings.tooltip_width / 4;\n\n while (_this5.settings.width - x < _this5.settings.tooltip_width + _this5.settings.tooltip_padding * 3) {\n x -= 10;\n }\n\n var y = dayScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(date).weekday()) + _this5.settings.tooltip_padding * 1.5; // Show tooltip\n\n _this5.tooltip.html(tooltip_html);\n\n _this5.tooltip.style(\"left\", event.pageX - Math.round(Number(_this5.tooltip.style('width').slice(0, -2))) / 2 + \"px\").style(\"top\", event.pageY - 50 + \"px\").transition().duration(50).style('opacity', .9).style('pointer-events', 'none').style(\"position\", \"absolute\").style(\"text-align\", \"center\").style(\"padding\", \".5rem\").style(\"color\", \"white\").style(\"background-color\", \"#313639\").style(\"background-opacity\", \".75\").style(\"border-radius\", \"#8px\");\n\n _this5.tooltip.append('div').style('border-right', 'solid 8px transparent').style('border-left', 'solid 8px transparent').style('border-top', 'solid 8px #313639').style('transform', 'translateX(-50%)').style('content', '').style('top', '100%').style('left', \"50%\").style('height', 5).style('width', 5).style('position', 'absolute');\n }).on('mouseout', function () {\n if (_this5.in_transition) {\n return;\n }\n\n _this5.hideTooltip();\n }).transition().delay(function () {\n return (Math.cos(Math.PI * Math.random()) + 1) * _this5.settings.transition_duration;\n }).duration(function () {\n return _this5.settings.transition_duration;\n }).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1).call(function (transition, callback) {\n if (transition.empty()) {\n callback();\n }\n\n var n = 0;\n transition.each(function () {\n return ++n;\n }).on('end', function () {\n if (! --n) {\n callback.apply(this, arguments);\n }\n });\n }, function () {\n _this5.in_transition = false;\n }); // Add week labels\n\n this.labels.selectAll('.label-week').remove();\n this.labels.selectAll('.label-week').data(week_labels).enter().append('text').attr('class', 'label label-week').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('font-size', function () {\n return Math.floor(_this5.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return 'Week ' + d.week();\n }).attr('x', function (d) {\n return weekScale(d.week());\n }).attr('y', this.settings.label_padding / 2).on('mouseenter', function (weekday) {\n if (_this5.in_transition) {\n return;\n }\n\n _this5.items.selectAll('.item-block-week').transition().duration(_this5.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).week() === weekday.week() ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this5.in_transition) {\n return;\n }\n\n _this5.items.selectAll('.item-block-week').transition().duration(_this5.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1);\n }); // Add day labels\n\n this.labels.selectAll('.label-day').remove();\n this.labels.selectAll('.label-day').data(day_labels).enter().append('text').attr('class', 'label label-day').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('x', this.settings.label_padding / 3).attr('y', function (d, i) {\n return dayScale(i) + dayScale.bandwidth() / 1.75;\n }).style('text-anchor', 'left').attr('font-size', function () {\n return Math.floor(_this5.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d).format('dddd')[0];\n }).on('mouseenter', function (d) {\n if (_this5.in_transition) {\n return;\n }\n\n var selected_day = moment__WEBPACK_IMPORTED_MODULE_1___default()(d);\n\n _this5.items.selectAll('.item-block-week').transition().duration(_this5.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).day() === selected_day.day() ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this5.in_transition) {\n return;\n }\n\n _this5.items.selectAll('.item-block-week').transition().duration(_this5.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1);\n }); // Add button to switch back to previous overview\n\n this.drawButton();\n }\n /**\n * Draw day overview\n */\n\n }, {\n key: \"drawDayOverview\",\n value: function drawDayOverview() {\n var _this6 = this;\n\n // Add current overview to the history\n if (this.history[this.history.length - 1] !== this.overview) {\n this.history.push(this.overview);\n } // Initialize selected date to today if it was not set\n\n\n if (!Object.keys(this.selected).length) {\n this.selected = this.props.data[this.props.data.length - 1];\n }\n\n var project_labels = this.selected.summary.map(function (project) {\n return project.name;\n });\n var projectScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleBand\"]().rangeRound([this.settings.label_padding, this.settings.height]).domain(project_labels);\n var itemScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleTime\"]().range([this.settings.label_padding * 2, this.settings.width]).domain([moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).startOf('day'), moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).endOf('day')]);\n this.items.selectAll('.item-block').remove();\n this.items.selectAll('.item-block').data(this.selected.details).enter().append('rect').attr('class', 'item item-block').style('cursor', 'pointer').attr('x', function (d) {\n return itemScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date));\n }).attr('y', function (d) {\n return projectScale(d.name) + projectScale.bandwidth() / 2 - 15;\n }).attr('width', function (d) {\n var end = itemScale(d3__WEBPACK_IMPORTED_MODULE_2__[\"timeSecond\"].offset(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date), d.value));\n return Math.max(end - itemScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date)), _this6.props.sizeonday); //RGB: adding the props parameter to redifine the size of the rectangle in the day view\n }).attr('height', function () {\n return Math.min(projectScale.bandwidth(), _this6.settings.max_block_height);\n }).attr('fill', function () {\n return _this6.props.color;\n }).style('opacity', 0).on('mouseover', function (d) {\n if (_this6.in_transition) {\n return;\n } //RGB: Changes to add the measure comming from props to the visualization\n // Construct tooltip\n\n\n var tooltip_html = '';\n tooltip_html += \"
\").concat(d.name, \"

\"); // tooltip_html += '
' + (d.value ? this.formatTime(d.value) : 'No time') + ' tracked
'\n\n tooltip_html += '
' + (d.value ? d.value : 'No entries for') + ' ' + _this6.props.measure + '
';\n tooltip_html += '
on ' + moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).format('dddd, MMM Do YYYY HH:mm') + '
'; // Calculate tooltip position\n\n var x = d.value * 100 / (60 * 60 * 24) + itemScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date));\n\n while (_this6.settings.width - x < _this6.settings.tooltip_width + _this6.settings.tooltip_padding * 3) {\n x -= 10;\n }\n\n var y = projectScale(d.name) + projectScale.bandwidth() / 2 + _this6.settings.tooltip_padding / 2; // Show tooltip\n\n _this6.tooltip.style(\"left\", event.pageX - Math.round(Number(_this6.tooltip.style('width').slice(0, -2))) / 2 + \"px\").style(\"top\", event.pageY - 100 + \"px\").transition().duration(50).style('opacity', .9).style('pointer-events', 'none').style(\"position\", \"absolute\").style(\"text-align\", \"center\").style(\"padding\", \".5rem\").style(\"color\", \"white\").style(\"background-color\", \"#313639\").style(\"background-opacity\", \".75\").style(\"border-radius\", \"#8px\");\n\n _this6.tooltip.append('div').style('border-right', 'solid 8px transparent').style('border-left', 'solid 8px transparent').style('border-top', 'solid 8px #313639').style('transform', 'translateX(-50%)').style('content', '').style('top', '100%').style('left', \"50%\").style('height', 5).style('width', 5).style('position', 'absolute');\n }).on('mouseout', function () {\n if (_this6.in_transition) {\n return;\n }\n\n _this6.hideTooltip();\n }).on('click', function (d) {\n if (!!_this6.props.handler && typeof _this6.props.handler == 'function') {\n _this6.props.handler(d);\n }\n }).transition().delay(function () {\n return (Math.cos(Math.PI * Math.random()) + 1) * _this6.settings.transition_duration;\n }).duration(function () {\n return _this6.settings.transition_duration;\n }).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0.5).call(function (transition, callback) {\n if (transition.empty()) {\n callback();\n }\n\n var n = 0;\n transition.each(function () {\n return ++n;\n }).on('end', function () {\n if (! --n) {\n callback.apply(this, arguments);\n }\n });\n }, function () {\n _this6.in_transition = false;\n }); // Add time labels\n\n var timeLabels = d3__WEBPACK_IMPORTED_MODULE_2__[\"timeHours\"](moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).startOf('day'), moment__WEBPACK_IMPORTED_MODULE_1___default()(this.selected.date).endOf('day'));\n var timeScale = d3__WEBPACK_IMPORTED_MODULE_2__[\"scaleTime\"]().range([this.settings.label_padding * 2, this.settings.width]).domain([0, timeLabels.length]);\n this.labels.selectAll('.label-time').remove();\n this.labels.selectAll('.label-time').data(timeLabels).enter().append('text').attr('class', 'label label-time').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('font-size', function () {\n return Math.floor(_this6.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_1___default()(d).format('HH:mm');\n }).attr('x', function (d, i) {\n return timeScale(i);\n }).attr('y', this.settings.label_padding / 2).on('mouseenter', function (d) {\n if (_this6.in_transition) {\n return;\n }\n\n var selected = itemScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d));\n\n _this6.items.selectAll('.item-block').transition().duration(_this6.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n var start = itemScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date));\n var end = itemScale(moment__WEBPACK_IMPORTED_MODULE_1___default()(d.date).add(d.value, 'seconds'));\n return selected >= start && selected <= end ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this6.in_transition) {\n return;\n }\n\n _this6.items.selectAll('.item-block').transition().duration(_this6.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0.5);\n }); // Add project labels\n\n var label_padding = this.settings.label_padding;\n this.labels.selectAll('.label-project').remove();\n this.labels.selectAll('.label-project').data(project_labels).enter().append('text').attr('class', 'label label-project').style('cursor', 'pointer').style('fill', 'rgb(170, 170, 170)').attr('x', this.settings.gutter).attr('y', function (d) {\n return projectScale(d) + projectScale.bandwidth() / 2;\n }).attr('min-height', function () {\n return projectScale.bandwidth();\n }).style('text-anchor', 'left').attr('font-size', function () {\n return Math.floor(_this6.settings.label_padding / 3) + 'px';\n }).text(function (d) {\n return d;\n }).each(function () {\n var obj = d3__WEBPACK_IMPORTED_MODULE_2__[\"select\"](this),\n text_length = obj.node().getComputedTextLength(),\n text = obj.text();\n\n while (text_length > label_padding * 1.5 && text.length > 0) {\n text = text.slice(0, -1);\n obj.text(text + '...');\n text_length = obj.node().getComputedTextLength();\n }\n }).on('mouseenter', function (project) {\n if (_this6.in_transition) {\n return;\n }\n\n _this6.items.selectAll('.item-block').transition().duration(_this6.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', function (d) {\n return d.name === project ? 1 : 0.1;\n });\n }).on('mouseout', function () {\n if (_this6.in_transition) {\n return;\n }\n\n _this6.items.selectAll('.item-block').transition().duration(_this6.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0.5);\n }); // Add button to switch back to previous overview\n\n this.drawButton();\n }\n /**\n * Draw the button for navigation purposes\n */\n\n }, {\n key: \"drawButton\",\n value: function drawButton() {\n var _this7 = this;\n\n this.buttons.selectAll('.button').remove();\n var button = this.buttons.append('g').attr('class', 'button button-back').style('cursor', 'pointer').attr('fill', 'transparent').style('opacity', 0).style('stroke-width', 2).style('stroke', 'rgb(170, 170, 170)') // .on('mouseover', d => {\n // let tooltip_html = ''\n // tooltip_html += `
Change View

`\n // // Show tooltip\n // this.tooltip.html(tooltip_html)\n // .style('left', this.settings.label_padding / 2 + 'px')\n // .style('top', this.settings.label_padding / 2 + 'px')\n // .transition()\n // .duration(this.settings.transition_duration / 2)\n // .ease(d3.easeLinear)\n // .style('opacity', 1)\n // })\n // .on('mouseout', () => {\n // if (this.in_transition) { return }\n // this.hideTooltip()\n // })\n .on('click', function () {\n if (_this7.in_transition) {\n return;\n } // Set transition boolean\n\n\n _this7.in_transition = true;\n\n _this7.hideTooltip(); // Clean the canvas from whichever overview type was on\n\n\n if (_this7.overview === 'year') {\n _this7.removeYearOverview();\n } else if (_this7.overview === 'month') {\n _this7.removeMonthOverview();\n } else if (_this7.overview === 'week') {\n _this7.removeWeekOverview();\n } else if (_this7.overview === 'day') {\n _this7.removeDayOverview();\n } // Redraw the chart\n\n\n _this7.history.pop();\n\n _this7.overview = _this7.history.pop();\n\n _this7.drawChart();\n }); // button.append('circle')\n // .attr('cx', this.settings.label_padding / 2.21)\n // .attr('cy', this.settings.label_padding / 2.21)\n // .attr('r', this.settings.item_size / 2)\n\n button.append('text').style('stroke-width', 1).style('text-anchor', 'middle').style('fill', 'rgb(170, 170, 170)').style('display', 'inline-flex').attr('x', this.settings.label_padding / 2).attr('y', this.settings.label_padding / 2.5).attr('dy', function () {\n return Math.floor(_this7.settings.width / 100) / 2.5;\n }).attr('font-size', function () {\n return Math.floor(_this7.settings.label_padding / 2.5) + 'px';\n }).html('←');\n button.transition().duration(this.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 1);\n }\n /**\n * Transition and remove items and labels related to global overview\n */\n\n }, {\n key: \"removeGlobalOverview\",\n value: function removeGlobalOverview() {\n this.items.selectAll('.item-block-year').transition().duration(this.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0).remove();\n this.labels.selectAll('.label-year').remove();\n }\n /**\n * Transition and remove items and labels related to year overview\n */\n\n }, {\n key: \"removeYearOverview\",\n value: function removeYearOverview() {\n this.items.selectAll('.item-circle').transition().duration(this.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0).remove();\n this.labels.selectAll('.label-day').remove();\n this.labels.selectAll('.label-month').remove();\n this.hideBackButton();\n }\n /**\n * Transition and remove items and labels related to month overview\n */\n\n }, {\n key: \"removeMonthOverview\",\n value: function removeMonthOverview() {\n var _this8 = this;\n\n this.items.selectAll('.item-block-month').selectAll('.item-block-rect').transition().duration(this.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0).attr('x', function (d, i) {\n return i % 2 === 0 ? -_this8.settings.width / 3 : _this8.settings.width / 3;\n }).remove();\n this.labels.selectAll('.label-day').remove();\n this.labels.selectAll('.label-week').remove();\n this.hideBackButton();\n }\n /**\n * Transition and remove items and labels related to week overview\n */\n\n }, {\n key: \"removeWeekOverview\",\n value: function removeWeekOverview() {\n var _this9 = this;\n\n this.items.selectAll('.item-block-week').selectAll('.item-block-rect').transition().duration(this.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0).attr('x', function (d, i) {\n return i % 2 === 0 ? -_this9.settings.width / 3 : _this9.settings.width / 3;\n }).remove();\n this.labels.selectAll('.label-day').remove();\n this.labels.selectAll('.label-week').remove();\n this.hideBackButton();\n }\n /**\n * Transition and remove items and labels related to daily overview\n */\n\n }, {\n key: \"removeDayOverview\",\n value: function removeDayOverview() {\n var _this10 = this;\n\n this.items.selectAll('.item-block').transition().duration(this.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0).attr('x', function (d, i) {\n return i % 2 === 0 ? -_this10.settings.width / 3 : _this10.settings.width / 3;\n }).remove();\n this.labels.selectAll('.label-time').remove();\n this.labels.selectAll('.label-project').remove();\n this.hideBackButton();\n }\n /**\n * Helper function to hide the tooltip\n */\n\n }, {\n key: \"hideTooltip\",\n value: function hideTooltip() {\n this.tooltip.transition().duration(this.settings.transition_duration / 2).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0);\n }\n /**\n * Helper function to hide the back button\n */\n\n }, {\n key: \"hideBackButton\",\n value: function hideBackButton() {\n this.buttons.selectAll('.button').transition().duration(this.settings.transition_duration).ease(d3__WEBPACK_IMPORTED_MODULE_2__[\"easeLinear\"]).style('opacity', 0).remove();\n }\n /**\n * Helper function to convert seconds to a human readable format\n * @param seconds Integer\n */\n\n }, {\n key: \"formatTime\",\n value: function formatTime(seconds) {\n var hours = Math.floor(seconds / 3600);\n var minutes = Math.floor((seconds - hours * 3600) / 60);\n var time = '';\n\n if (hours > 0) {\n time += hours === 1 ? '1 hour ' : hours + ' hours ';\n }\n\n if (minutes > 0) {\n time += minutes === 1 ? '1 minute' : minutes + ' minutes';\n }\n\n if (hours === 0 && minutes === 0) {\n time = Math.round(seconds) + ' seconds';\n }\n\n return time;\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this11 = this;\n\n return react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](CalendarChartWrapper, {\n id: \"calendar-heatmap\",\n className: _calendar_heatmap_css__WEBPACK_IMPORTED_MODULE_4___default.a.calendarHeatmap,\n ref: function ref(elem) {\n _this11.container = elem;\n }\n });\n }\n }]);\n\n return CalendarHeatmap;\n}(react__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\nCalendarHeatmap.defaultProps = {\n data: [],\n overview: 'year',\n color: '#ff4500',\n handler: undefined\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (CalendarHeatmap);\n\n//# sourceURL=webpack://%5Bname%5D/./src/calendar_visualization/calendar-heatmap.component.js?")},"./src/calendar_visualization/calendar-heatmap.css": /*!*********************************************************!*\ !*** ./src/calendar_visualization/calendar-heatmap.css ***! \*********************************************************/ @@ -2714,4 +2714,4 @@ /*!****************************************************************!*\ !*** ./src/calendar_visualization/calendar_chart_container.js ***! \****************************************************************/ -/*! no exports provided */function(module,__webpack_exports__,__webpack_require__){"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _calendar_heatmap_component__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./calendar-heatmap.component */ "./src/calendar_visualization/calendar-heatmap.component.js");\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! d3 */ "./node_modules/d3/index.js");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! moment */ "./node_modules/moment/moment.js");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_4__);\n\n //import CalendarHM from \'./calendar_chart\' //\'./calendar-heatmap.component\'\n\n\n\n\nvar colorByOps = {\n SEGMENT: "segment",\n RANGE: "range"\n};\nvar baseOptions = {\n // overview: {\n // type: "string",\n // label: "Overview Data",\n // display: "select",\n // values: [\n // { "global": "global" },\n // { "year": "year" },\n // { "month": "month" },\n // { "week": "week" },\n // { "day": "day" }\n // ],\n // default: "global",\n // hidden: true,\n // section: "Style",\n // order: 100\n // },\n show_title: {\n type: \'boolean\',\n label: \'Show Title\',\n "default": false,\n section: \'Style\',\n order: 0\n },\n font_size_title: {\n type: "string",\n label: "Title Font Size ",\n "default": "24",\n section: "Style",\n order: 1\n },\n show_date_range: {\n type: \'boolean\',\n label: \'Show Date Range\',\n "default": false,\n section: \'Style\',\n order: 2\n },\n font_size_date: {\n type: "string",\n label: "Dates font size ",\n "default": "16",\n section: "Style",\n order: 3\n },\n target_color: {\n type: "string",\n label: "Calendar Color",\n display: "color",\n "default": "red",\n section: "Style",\n order: 4\n },\n title: {\n type: "string",\n label: "Title ",\n "default": "Title",\n section: "Values",\n order: 1\n },\n measure: {\n type: "string",\n label: "Tooltip Label Override",\n "default": "Counts",\n section: "Values",\n order: 2\n },\n tot_measure: {\n type: "string",\n label: "Totals Tooltip Label Override",\n "default": "Total Counts",\n section: "Values",\n order: 3\n }\n};\nlooker.plugins.visualizations.add({\n // Id and Label are legacy properties that no longer have any function besides documenting\n // what the visualization used to have. The properties are now set via the manifest\n // form within the admin/visualizations page of Looker\n id: "heatmap_chart",\n label: "Calendar Heatmap",\n options: baseOptions,\n // Set up the initial state of the visualization\n create: function create(element, config) {\n this.chart = react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null), element);\n },\n // Render in response to the data or settings changing\n updateAsync: function updateAsync(data, element, config, queryResponse, details, done) {\n // Clear any errors from previous updates\n this.clearErrors(); // console.log(data);\n // Throw some errors and exit if the shape of the data isn\'t what this chart needs\n\n if (queryResponse.fields.measures.length == 0) {\n this.addError({\n title: "No Measures",\n message: "This chart requires measures."\n });\n return;\n } // Throw some errors and exit if the shape of the data isn\'t what this chart needs\n\n\n if (queryResponse.fields.dimensions.length == 0) {\n this.addError({\n title: "No Dimensions",\n message: "This chart requires dimensions."\n });\n return;\n }\n\n if (data == 0) {\n this.addError({\n title: "No Results",\n message: ""\n });\n return;\n } // // Grab the first cell of the data\n // var firstRow = data;\n // // RGB: getting the labels on the query response for the specific column values and field names\n // // if the query changes, the data source will change, so the functionality should by dinamic\n // const dim1 = queryResponse.fields.dimensions[0].name;\n // const meas1 = queryResponse.fields.measures[0].name;\n // //let nowtime = moment.max(data.map(function(d){ return d.dim1.value}));\n // let reporttime = data.map(d => {return moment(d[dim1].value)} );\n // let now = moment.max(reporttime);\n // let time_ago = moment.min(reporttime); \n // const dataready = reporttime.map(function (dateElement, index) { //function (datrow, index){\n // return {\n // date: dateElement, //datrow[dim1].value,moment("2014-02-27T10:00:00").format(\'DD-MM-YYYY\')\n // details: data.filter(details => details[dim1].value == moment(dateElement).format(\'YYYY-MM-DD\')).map(function(filrow,err) { \n // return {\n // \'name\': filrow[dim1].value,\n // \'date\': filrow[dim1].value,\n // \'value\': parseInt(filrow[meas1].value)\n // }}),\n // init: function () {\n // this.total = this.details.reduce(function (prev, e) {\n // return prev + e.value\n // }, 0)\n // return this\n // } \n // }.init()\n // });\n // const dataclean = dataready;\n // const finaldata = dataclean;\n\n\n console.log(data); // Grab the first cell of the data\n\n var firstRow = data; // RGB: getting the labels on the query response for the specific column values and field names\n // if the query changes, the data source will change, so the functionality should by dinamic\n\n var dim1 = queryResponse.fields.dimensions[0].name; // const dim2 = queryResponse.fields.dimensions[1].name;\n\n var meas1 = queryResponse.fields.measures[0].name; //let nowtime = moment.max(data.map(function(d){ return d.dim1.value}));\n\n var reporttime = data.map(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_4___default()(d[dim1].value);\n });\n var now = moment__WEBPACK_IMPORTED_MODULE_4___default.a.max(reporttime);\n var time_ago = moment__WEBPACK_IMPORTED_MODULE_4___default.a.min(reporttime);\n var orlist = d3__WEBPACK_IMPORTED_MODULE_3__["timeDays"](time_ago, now);\n var dataready = orlist.map(function (dateElement, index) {\n //function (datrow, index){\n return {\n date: dateElement,\n //datrow[dim1].value,moment("2014-02-27T10:00:00").format(\'DD-MM-YYYY\')\n details: data.filter(function (details) {\n return details[dim1].value == moment__WEBPACK_IMPORTED_MODULE_4___default()(dateElement).format(\'YYYY-MM-DD\');\n }).map(function (filrow, err) {\n return {\n \'name\': filrow[dim1].value,\n \'date\': function () {\n var projectDate = new Date(dateElement.getTime());\n projectDate.setHours(Math.floor(Math.random() * 24));\n projectDate.setMinutes(Math.floor(Math.random() * 60));\n return projectDate;\n }(),\n //filrow[dim1].value,\n \'value\': parseInt(filrow[meas1].value)\n };\n }),\n init: function init() {\n this.total = this.details.reduce(function (prev, e) {\n return prev + e.value;\n }, 0);\n return this;\n }\n }.init();\n });\n var dataclean = dataready.filter(function (ele, ind) {\n return ind === dataready.findIndex(function (elem) {\n return elem.date === ele.date;\n });\n });\n var finaldata = dataclean.map(function (d) {\n var summary = d.details.reduce(function (uniques, project) {\n if (!uniques[project.name]) {\n uniques[project.name] = {\n \'value\': parseInt(project.value)\n };\n } else {\n uniques[project.name].value += project.value;\n }\n\n return uniques;\n }, {});\n var unsorted_summary = Object.keys(summary).map(function (key) {\n return {\n \'name\': key,\n \'value\': parseInt(summary[key].value)\n };\n });\n d.summary = unsorted_summary.sort(function (a, b) {\n return b.value - a.value;\n });\n return d;\n }); // console.log(finaldata);\n\n if (finaldata.length == 0) {\n this.addError({\n title: "Wrong input pattern or insufficient data.",\n message: "Calendar Heatmap requires one non-null date dimension and one measure."\n });\n return;\n } // Finally update the state with our new data\n\n\n this.chart = react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_calendar_heatmap_component__WEBPACK_IMPORTED_MODULE_2__["default"], {\n data: finaldata,\n color: config.target_color,\n overview: "year",\n measure: config.measure,\n totmeasure: config.tot_measure,\n sizeonday: config.sizeshape,\n title: config.title,\n show_title: config.show_title,\n font_size_title: config.font_size_title,\n show_date_range: config.show_date_range,\n font_size_date: config.font_size_date,\n startdate: time_ago,\n enddate: now\n }), element); // We are done rendering! Let Looker know.\n\n done();\n }\n});\n\n//# sourceURL=webpack://%5Bname%5D/./src/calendar_visualization/calendar_chart_container.js?')}})}); \ No newline at end of file +/*! no exports provided */function(module,__webpack_exports__,__webpack_require__){"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _calendar_heatmap_component__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./calendar-heatmap.component */ "./src/calendar_visualization/calendar-heatmap.component.js");\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! d3 */ "./node_modules/d3/index.js");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! moment */ "./node_modules/moment/moment.js");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_4__);\n\n //import CalendarHM from \'./calendar_chart\' //\'./calendar-heatmap.component\'\n\n\n\n\nvar colorByOps = {\n SEGMENT: "segment",\n RANGE: "range"\n};\nvar baseOptions = {\n // overview: {\n // type: "string",\n // label: "Overview Data",\n // display: "select",\n // values: [\n // { "global": "global" },\n // { "year": "year" },\n // { "month": "month" },\n // { "week": "week" },\n // { "day": "day" }\n // ],\n // default: "global",\n // hidden: true,\n // section: "Style",\n // order: 100\n // },\n show_title: {\n type: \'boolean\',\n label: \'Show Title\',\n "default": false,\n section: \'Style\',\n order: 0\n },\n font_size_title: {\n type: "string",\n label: "Title Font Size ",\n "default": "24",\n section: "Style",\n order: 1\n },\n show_date_range: {\n type: \'boolean\',\n label: \'Show Date Range\',\n "default": false,\n section: \'Style\',\n order: 2\n },\n font_size_date: {\n type: "string",\n label: "Dates font size ",\n "default": "16",\n section: "Style",\n order: 3\n },\n target_color: {\n type: "string",\n label: "Calendar Color",\n display: "color",\n "default": "red",\n section: "Style",\n order: 4\n },\n title: {\n type: "string",\n label: "Title ",\n "default": "Title",\n section: "Values",\n order: 1\n },\n measure: {\n type: "string",\n label: "Tooltip Label Override",\n "default": "Counts",\n section: "Values",\n order: 2\n },\n tot_measure: {\n type: "string",\n label: "Totals Tooltip Label Override",\n "default": "Total Counts",\n section: "Values",\n order: 3\n }\n};\nlooker.plugins.visualizations.add({\n // Id and Label are legacy properties that no longer have any function besides documenting\n // what the visualization used to have. The properties are now set via the manifest\n // form within the admin/visualizations page of Looker\n id: "heatmap_chart",\n label: "Calendar Heatmap",\n options: baseOptions,\n // Set up the initial state of the visualization\n create: function create(element, config) {\n this.chart = react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null), element);\n },\n // Render in response to the data or settings changing\n updateAsync: function updateAsync(data, element, config, queryResponse, details, done) {\n // Clear any errors from previous updates\n this.clearErrors(); // console.log(data);\n // Throw some errors and exit if the shape of the data isn\'t what this chart needs\n\n if (queryResponse.fields.measures.length == 0) {\n this.addError({\n title: "No Measures",\n message: "This chart requires measures."\n });\n return;\n } // Throw some errors and exit if the shape of the data isn\'t what this chart needs\n\n\n if (queryResponse.fields.dimensions.length == 0) {\n this.addError({\n title: "No Dimensions",\n message: "This chart requires dimensions."\n });\n return;\n }\n\n if (data == 0) {\n this.addError({\n title: "No Results",\n message: ""\n });\n return;\n } // // Grab the first cell of the data\n // var firstRow = data;\n // // RGB: getting the labels on the query response for the specific column values and field names\n // // if the query changes, the data source will change, so the functionality should by dinamic\n // const dim1 = queryResponse.fields.dimensions[0].name;\n // const meas1 = queryResponse.fields.measures[0].name;\n // //let nowtime = moment.max(data.map(function(d){ return d.dim1.value}));\n // let reporttime = data.map(d => {return moment(d[dim1].value)} );\n // let now = moment.max(reporttime);\n // let time_ago = moment.min(reporttime); \n // const dataready = reporttime.map(function (dateElement, index) { //function (datrow, index){\n // return {\n // date: dateElement, //datrow[dim1].value,moment("2014-02-27T10:00:00").format(\'DD-MM-YYYY\')\n // details: data.filter(details => details[dim1].value == moment(dateElement).format(\'YYYY-MM-DD\')).map(function(filrow,err) { \n // return {\n // \'name\': filrow[dim1].value,\n // \'date\': filrow[dim1].value,\n // \'value\': parseInt(filrow[meas1].value)\n // }}),\n // init: function () {\n // this.total = this.details.reduce(function (prev, e) {\n // return prev + e.value\n // }, 0)\n // return this\n // } \n // }.init()\n // });\n // const dataclean = dataready;\n // const finaldata = dataclean;\n // console.log(data);\n // Grab the first cell of the data\n\n\n var firstRow = data; // RGB: getting the labels on the query response for the specific column values and field names\n // if the query changes, the data source will change, so the functionality should by dinamic\n\n var dim1 = queryResponse.fields.dimensions[0].name; // const dim2 = queryResponse.fields.dimensions[1].name;\n\n var meas1 = queryResponse.fields.measures[0].name; //let nowtime = moment.max(data.map(function(d){ return d.dim1.value}));\n\n var reporttime = data.map(function (d) {\n return moment__WEBPACK_IMPORTED_MODULE_4___default()(d[dim1].value);\n });\n var now = moment__WEBPACK_IMPORTED_MODULE_4___default.a.max(reporttime);\n var time_ago = moment__WEBPACK_IMPORTED_MODULE_4___default.a.min(reporttime);\n var orlist = d3__WEBPACK_IMPORTED_MODULE_3__["timeDays"](time_ago, now);\n var dataready = orlist.map(function (dateElement, index) {\n //function (datrow, index){\n return {\n date: dateElement,\n //datrow[dim1].value,moment("2014-02-27T10:00:00").format(\'DD-MM-YYYY\')\n details: data.filter(function (details) {\n return details[dim1].value == moment__WEBPACK_IMPORTED_MODULE_4___default()(dateElement).format(\'YYYY-MM-DD\');\n }).map(function (filrow, err) {\n return {\n \'name\': filrow[dim1].value,\n \'date\': function () {\n var projectDate = new Date(dateElement.getTime());\n projectDate.setHours(Math.floor(Math.random() * 24));\n projectDate.setMinutes(Math.floor(Math.random() * 60));\n return projectDate;\n }(),\n //filrow[dim1].value,\n \'value\': parseInt(filrow[meas1].value)\n };\n }),\n init: function init() {\n this.total = this.details.reduce(function (prev, e) {\n return prev + e.value;\n }, 0);\n return this;\n }\n }.init();\n });\n var dataclean = dataready.filter(function (ele, ind) {\n return ind === dataready.findIndex(function (elem) {\n return elem.date === ele.date;\n });\n });\n var finaldata = dataclean.map(function (d) {\n var summary = d.details.reduce(function (uniques, project) {\n if (!uniques[project.name]) {\n uniques[project.name] = {\n \'value\': parseInt(project.value)\n };\n } else {\n uniques[project.name].value += project.value;\n }\n\n return uniques;\n }, {});\n var unsorted_summary = Object.keys(summary).map(function (key) {\n return {\n \'name\': key,\n \'value\': parseInt(summary[key].value)\n };\n });\n d.summary = unsorted_summary.sort(function (a, b) {\n return b.value - a.value;\n });\n return d;\n }); // console.log(finaldata);\n\n if (finaldata.length == 0) {\n this.addError({\n title: "Wrong input pattern or insufficient data.",\n message: "Calendar Heatmap requires one non-null date dimension and one measure."\n });\n return;\n } // Finally update the state with our new data\n\n\n this.chart = react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_calendar_heatmap_component__WEBPACK_IMPORTED_MODULE_2__["default"], {\n data: finaldata,\n color: config.target_color,\n overview: "year",\n measure: config.measure,\n totmeasure: config.tot_measure,\n sizeonday: config.sizeshape,\n title: config.title,\n show_title: config.show_title,\n font_size_title: config.font_size_title,\n show_date_range: config.show_date_range,\n font_size_date: config.font_size_date,\n startdate: time_ago,\n enddate: now\n }), element); // We are done rendering! Let Looker know.\n\n done();\n }\n});\n\n//# sourceURL=webpack://%5Bname%5D/./src/calendar_visualization/calendar_chart_container.js?')}})}); \ No newline at end of file diff --git a/dist/gauge_chart.js b/dist/gauge_chart.js index d8ccb38f..8d845736 100644 --- a/dist/gauge_chart.js +++ b/dist/gauge_chart.js @@ -2194,7 +2194,7 @@ /*!**************************************************!*\ !*** ./src/gauge_chart/gauge_chart_container.js ***! \**************************************************/ -/*! no exports provided */function(module,__webpack_exports__,__webpack_require__){"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../common */ "./src/common.js");\n/* harmony import */ var _gauge_chart_copy__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./gauge_chart_copy */ "./src/gauge_chart/gauge_chart_copy.js");\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! styled-components */ "./node_modules/styled-components/dist/styled-components.browser.esm.js");\nfunction _templateObject() {\n var data = _taggedTemplateLiteral(["\\n text-align: center;\\n font-family: \\"Open Sans\\", \\"Noto Sans JP\\", \\"Noto Sans\\", \\"Noto Sans CJK KR\\",\\n Helvetica, Arial, sans-serif;\\n color: #3a4245;\\n "]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\n\n\n\n\n\nvar colorByOps = {\n SEGMENT: "segment",\n RANGE: "range"\n};\nvar baseOptions = {\n color_by: {\n type: "string",\n label: "Color By",\n display: "select",\n section: "Style",\n values: [{\n "Color By Segment": colorByOps.SEGMENT\n }, {\n "Color By Range": colorByOps.RANGE\n }],\n "default": colorByOps.RANGE,\n order: 2\n },\n segments: {\n type: "string",\n label: "Gauge Segments",\n display: "select",\n values: [{\n 2: "2"\n }, {\n 3: "3"\n }, {\n 4: "4"\n }, {\n 5: "5"\n }, {\n 6: "6"\n }, {\n 7: "7"\n }, {\n 8: "8"\n }, {\n 9: "9"\n }, {\n 10: "10"\n }],\n "default": 3,\n section: "Style",\n order: 2\n },\n thickness: {\n type: "string",\n label: "Gauge Thickness",\n display: "select",\n values: [{\n "10": "10"\n }, {\n "20": "20"\n }, {\n "30": "30"\n }, {\n "40": "40"\n }, {\n "50": "50"\n }, {\n "60": "60"\n }, {\n "70": "70"\n }, {\n "80": "80"\n }, {\n "90": "90"\n }, {\n "100": "100"\n }],\n "default": "50",\n section: "Style",\n order: 3\n },\n font_size_title: {\n type: "string",\n label: "Title Font Size",\n "default": "15",\n section: "Style",\n order: 7\n },\n font_size_target: {\n type: "string",\n label: "Target Font Size",\n "default": "10",\n section: "Style",\n order: 9\n },\n font_size_arc: {\n type: "string",\n label: "Arc Font Size",\n "default": "10",\n section: "Style",\n order: 8\n },\n font_size_main: {\n type: "string",\n label: "Value Font Size",\n "default": "20",\n section: "Style",\n order: 9\n },\n target_display: {\n type: "boolean",\n label: "Display Target",\n values: [{\n Yes: true\n }, {\n No: false\n }],\n display: "radio",\n "default": true,\n section: "Style",\n order: 10\n },\n target_color: {\n type: "array",\n label: "Target Color",\n display: "color",\n "default": ["#6565ee"],\n section: "Style",\n order: 11\n },\n target_label: {\n type: "string",\n label: "Target Label",\n "default": "Target: ",\n section: "Values",\n order: 4\n },\n target_value: {\n type: "number",\n label: "Target Value",\n "default": 0,\n section: "Values"\n }\n};\nlooker.plugins.visualizations.add({\n // Id and Label are legacy properties that no longer have any function besides documenting\n // what the visualization used to have. The properties are now set via the manifest\n // form within the admin/visualizations page of Looker\n id: "gauge_chart",\n label: "Gauge Chart",\n options: baseOptions,\n // Set up the initial state of the visualization\n create: function create(element, config) {\n this.chart = react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, "...Loading"), element);\n },\n // Render in response to the data or settings changing\n updateAsync: function updateAsync(data, element, config, queryResponse, details, done) {\n if (queryResponse.fields.measures.length != 1) {\n this.addError({\n title: "Single measure only.",\n message: "This chart accepts one measure."\n });\n return;\n }\n\n if (!Object(_common__WEBPACK_IMPORTED_MODULE_2__["handleErrors"])(this, queryResponse, {\n min_pivots: 0,\n max_pivots: 0,\n min_dimensions: 0,\n max_dimensions: 1,\n min_measures: 1,\n max_measures: 1\n })) return;\n this.clearErrors();\n console.log(element.clientHeight);\n console.log(element.clientWidth);\n var width = element.clientWidth * .95;\n var height = element.clientHeight * .95;\n var GaugeChartWrapper = styled_components__WEBPACK_IMPORTED_MODULE_4__["default"].div(_templateObject()); // Grab the first cell of the data\n\n var firstRow = data[0]; //const firstCell = firstRow[queryResponse.fields.dimensions[0].name].value;\n //const firstCol = firstRow[queryResponse.fields.measures[0].name];\n\n var dataPoints = queryResponse.fields.measures.map(function (measure) {\n var formattedValue = Object(_common__WEBPACK_IMPORTED_MODULE_2__["formatType"])(config["value_format_".concat(measure.label)] || measure.value_format)(firstRow[measure.name].value);\n return {\n name: measure.name,\n label: measure.label,\n value: firstRow[measure.name].value,\n valueFormat: config["value_format_".concat(measure.label)],\n formattedValue: formattedValue\n };\n });\n var options = baseOptions;\n options["".concat(dataPoints[0].label, "_color_range")] = {\n type: "array",\n label: "".concat(dataPoints[0].label, " - Color Range"),\n display: "colors",\n "default": ["#6565ee", "#33a7ed"],\n section: "Style",\n order: 0\n };\n options["".concat(dataPoints[0].label, "_color_segments")] = {\n type: "array",\n label: "".concat(dataPoints[0].label, " - Color Segments"),\n display: "colors",\n "default": ["#6565ee", "#33a7ed"],\n section: "Style",\n order: 1\n };\n options["range_".concat(dataPoints[0].label)] = {\n type: "array",\n label: "".concat(dataPoints[0].label, " - Range Values"),\n display: "mimax_values",\n "default": [0, dataPoints[0].value],\n section: "Values"\n };\n options["show_title_".concat(dataPoints[0].label)] = {\n type: "boolean",\n label: "Show ".concat(dataPoints[0].label, " - Title"),\n "default": true,\n section: "Values"\n };\n options["title_override_".concat(dataPoints[0].label)] = {\n type: "string",\n label: "Override ".concat(dataPoints[0].label, " - Title"),\n section: "Values",\n "default": "".concat(dataPoints[0].label),\n placeholder: "".concat(dataPoints[0].label) //order: 10 * index + 1\n\n };\n options["value_format_".concat(dataPoints[0].label)] = {\n type: "string",\n label: "".concat(dataPoints[0].label, " - Value Format"),\n section: "Values",\n "default": "#,##0.00",\n placeholder: "#,##0.00"\n };\n this.trigger("registerOptions", options); // Finally update the state with our new data\n\n this.chart = react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(GaugeChartWrapper, null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_gauge_chart_copy__WEBPACK_IMPORTED_MODULE_3__["default"], {\n containerHeight: height,\n width: width,\n height: height,\n target: config.target_value,\n config: config,\n data: dataPoints,\n colors: config.color_by == "range" ? config["".concat(dataPoints[0].label, "_color_range")] : config["".concat(dataPoints[0].label, "_color_segments")],\n title_display: config["show_title_".concat(dataPoints[0].label)],\n title: config["title_override_".concat(dataPoints[0].label)],\n range: config["range_".concat(dataPoints[0].label)] //needs variable value\n ,\n value_format: config["value_format_".concat(dataPoints[0].label)],\n formatted_value: dataPoints[0].formattedValue,\n percentage: false\n })), element); // We are done rendering! Let Looker know.\n\n done();\n }\n});\n\n//# sourceURL=webpack://%5Bname%5D/./src/gauge_chart/gauge_chart_container.js?')},"./src/gauge_chart/gauge_chart_copy.js": +/*! no exports provided */function(module,__webpack_exports__,__webpack_require__){"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../common */ "./src/common.js");\n/* harmony import */ var _gauge_chart_copy__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./gauge_chart_copy */ "./src/gauge_chart/gauge_chart_copy.js");\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! styled-components */ "./node_modules/styled-components/dist/styled-components.browser.esm.js");\nfunction _templateObject() {\n var data = _taggedTemplateLiteral(["\\n text-align: center;\\n font-family: \\"Open Sans\\", \\"Noto Sans JP\\", \\"Noto Sans\\", \\"Noto Sans CJK KR\\",\\n Helvetica, Arial, sans-serif;\\n color: #3a4245;\\n "]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\n\n\n\n\n\nvar colorByOps = {\n SEGMENT: "segment",\n RANGE: "range"\n};\nvar baseOptions = {\n color_by: {\n type: "string",\n label: "Color By",\n display: "select",\n section: "Style",\n values: [{\n "Color By Segment": colorByOps.SEGMENT\n }, {\n "Color By Range": colorByOps.RANGE\n }],\n "default": colorByOps.RANGE,\n order: 2\n },\n segments: {\n type: "string",\n label: "Gauge Segments",\n display: "select",\n values: [{\n 2: "2"\n }, {\n 3: "3"\n }, {\n 4: "4"\n }, {\n 5: "5"\n }, {\n 6: "6"\n }, {\n 7: "7"\n }, {\n 8: "8"\n }, {\n 9: "9"\n }, {\n 10: "10"\n }],\n "default": 3,\n section: "Style",\n order: 2\n },\n thickness: {\n type: "string",\n label: "Gauge Thickness",\n display: "select",\n values: [{\n "10": "10"\n }, {\n "20": "20"\n }, {\n "30": "30"\n }, {\n "40": "40"\n }, {\n "50": "50"\n }, {\n "60": "60"\n }, {\n "70": "70"\n }, {\n "80": "80"\n }, {\n "90": "90"\n }, {\n "100": "100"\n }],\n "default": "50",\n section: "Style",\n order: 3\n },\n font_size_title: {\n type: "string",\n label: "Title Font Size",\n "default": "15",\n section: "Style",\n order: 7\n },\n font_size_target: {\n type: "string",\n label: "Target Font Size",\n "default": "10",\n section: "Style",\n order: 9\n },\n font_size_arc: {\n type: "string",\n label: "Arc Font Size",\n "default": "10",\n section: "Style",\n order: 8\n },\n font_size_main: {\n type: "string",\n label: "Value Font Size",\n "default": "20",\n section: "Style",\n order: 9\n },\n target_display: {\n type: "boolean",\n label: "Display Target",\n values: [{\n Yes: true\n }, {\n No: false\n }],\n display: "radio",\n "default": true,\n section: "Style",\n order: 10\n },\n target_color: {\n type: "array",\n label: "Target Color",\n display: "color",\n "default": ["#6565ee"],\n section: "Style",\n order: 11\n },\n target_label: {\n type: "string",\n label: "Target Label",\n "default": "Target: ",\n section: "Values",\n order: 4\n },\n target_value: {\n type: "number",\n label: "Target Value",\n "default": 0,\n section: "Values"\n }\n};\nlooker.plugins.visualizations.add({\n // Id and Label are legacy properties that no longer have any function besides documenting\n // what the visualization used to have. The properties are now set via the manifest\n // form within the admin/visualizations page of Looker\n id: "gauge_chart",\n label: "Gauge Chart",\n options: baseOptions,\n // Set up the initial state of the visualization\n create: function create(element, config) {\n this.chart = react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null), element);\n },\n // Render in response to the data or settings changing\n updateAsync: function updateAsync(data, element, config, queryResponse, details, done) {\n if (queryResponse.fields.measures.length != 1) {\n this.addError({\n title: "Single measure only.",\n message: "This chart accepts one measure."\n });\n return;\n }\n\n if (!Object(_common__WEBPACK_IMPORTED_MODULE_2__["handleErrors"])(this, queryResponse, {\n min_pivots: 0,\n max_pivots: 0,\n min_dimensions: 0,\n max_dimensions: 1,\n min_measures: 1,\n max_measures: 1\n })) return;\n this.clearErrors(); // console.log(element.clientHeight);\n // console.log(element.clientWidth);\n\n var width = element.clientWidth * .95;\n var height = element.clientHeight * .95;\n var GaugeChartWrapper = styled_components__WEBPACK_IMPORTED_MODULE_4__["default"].div(_templateObject()); // Grab the first cell of the data\n\n var firstRow = data[0]; //const firstCell = firstRow[queryResponse.fields.dimensions[0].name].value;\n //const firstCol = firstRow[queryResponse.fields.measures[0].name];\n\n var dataPoints = queryResponse.fields.measures.map(function (measure) {\n var formattedValue = Object(_common__WEBPACK_IMPORTED_MODULE_2__["formatType"])(config["value_format_".concat(measure.label)] || measure.value_format)(firstRow[measure.name].value);\n return {\n name: measure.name,\n label: measure.label,\n value: firstRow[measure.name].value,\n valueFormat: config["value_format_".concat(measure.label)],\n formattedValue: formattedValue\n };\n });\n var options = baseOptions;\n options["".concat(dataPoints[0].label, "_color_range")] = {\n type: "array",\n label: "".concat(dataPoints[0].label, " - Color Range"),\n display: "colors",\n "default": ["#6565ee", "#33a7ed"],\n section: "Style",\n order: 0\n };\n options["".concat(dataPoints[0].label, "_color_segments")] = {\n type: "array",\n label: "".concat(dataPoints[0].label, " - Color Segments"),\n display: "colors",\n "default": ["#6565ee", "#33a7ed"],\n section: "Style",\n order: 1\n };\n options["range_".concat(dataPoints[0].label)] = {\n type: "array",\n label: "".concat(dataPoints[0].label, " - Range Values"),\n display: "mimax_values",\n "default": [0, dataPoints[0].value],\n section: "Values"\n };\n options["show_title_".concat(dataPoints[0].label)] = {\n type: "boolean",\n label: "Show ".concat(dataPoints[0].label, " - Title"),\n "default": true,\n section: "Values"\n };\n options["title_override_".concat(dataPoints[0].label)] = {\n type: "string",\n label: "Override ".concat(dataPoints[0].label, " - Title"),\n section: "Values",\n "default": "".concat(dataPoints[0].label),\n placeholder: "".concat(dataPoints[0].label) //order: 10 * index + 1\n\n };\n options["value_format_".concat(dataPoints[0].label)] = {\n type: "string",\n label: "".concat(dataPoints[0].label, " - Value Format"),\n section: "Values",\n "default": "#,##0.00",\n placeholder: "#,##0.00"\n };\n this.trigger("registerOptions", options); // Finally update the state with our new data\n\n this.chart = react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(GaugeChartWrapper, null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_gauge_chart_copy__WEBPACK_IMPORTED_MODULE_3__["default"], {\n containerHeight: height,\n width: width,\n height: height,\n target: config.target_value,\n config: config,\n data: dataPoints,\n colors: config.color_by == "range" ? config["".concat(dataPoints[0].label, "_color_range")] : config["".concat(dataPoints[0].label, "_color_segments")],\n title_display: config["show_title_".concat(dataPoints[0].label)],\n title: config["title_override_".concat(dataPoints[0].label)],\n range: config["range_".concat(dataPoints[0].label)] //needs variable value\n ,\n value_format: config["value_format_".concat(dataPoints[0].label)],\n formatted_value: dataPoints[0].formattedValue,\n percentage: false\n })), element); // We are done rendering! Let Looker know.\n\n done();\n }\n});\n\n//# sourceURL=webpack://%5Bname%5D/./src/gauge_chart/gauge_chart_container.js?')},"./src/gauge_chart/gauge_chart_copy.js": /*!*********************************************!*\ !*** ./src/gauge_chart/gauge_chart_copy.js ***! \*********************************************/ diff --git a/dist/grouped_card.js b/dist/grouped_card.js index 36638415..3990291e 100644 --- a/dist/grouped_card.js +++ b/dist/grouped_card.js @@ -2550,7 +2550,7 @@ /*!******************************************!*\ !*** ./src/grouped_card/grouped_card.js ***! \******************************************/ -/*! exports provided: default */function(module,__webpack_exports__,__webpack_require__){"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ "./node_modules/prop-types/index.js");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ "./node_modules/styled-components/dist/styled-components.browser.esm.js");\n/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../common */ "./src/common.js");\nfunction _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _templateObject13() {\n var data = _taggedTemplateLiteral(["\\n position: absolute;\\n top: 0;\\n width: 100%;\\n height: 40px;\\n text-align: center;\\n line-height: 40px; \\n color: #000000;\\n\\n a.drillable-link {\\n color: #000000;\\n }\\n"]);\n\n _templateObject13 = function _templateObject13() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject12() {\n var data = _taggedTemplateLiteral(["\\n background-color: ", ";\\n width: ", "%;\\n height: 40px;\\n"]);\n\n _templateObject12 = function _templateObject12() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject11() {\n var data = _taggedTemplateLiteral(["\\n position: relative;\\n background-color: ", ";\\n height: 40px;\\n text-align: center;\\n"]);\n\n _templateObject11 = function _templateObject11() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject10() {\n var data = _taggedTemplateLiteral(["\\n font-weight: 100;\\n display: inline-block;\\n padding-right: 5px;\\n"]);\n\n _templateObject10 = function _templateObject10() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject9() {\n var data = _taggedTemplateLiteral(["\\n display: inline-block;\\n color: ", "\\n padding-right: 5px;\\n"]);\n\n _templateObject9 = function _templateObject9() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject8() {\n var data = _taggedTemplateLiteral(["\\n display: inline-block; \\n width: 0; \\n height: 0; \\n border-left: 5px solid transparent;\\n border-right: 5px solid transparent;\\n border-top: 10px solid #f00;\\n margin-right: 5px;\\n"]);\n\n _templateObject8 = function _templateObject8() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject7() {\n var data = _taggedTemplateLiteral(["\\n display: inline-block;\\n width: 0; \\n height: 0; \\n border-left: 5px solid transparent;\\n border-right: 5px solid transparent;\\n border-bottom: 10px solid green;\\n margin-right: 5px;\\n"]);\n\n _templateObject7 = function _templateObject7() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject6() {\n var data = _taggedTemplateLiteral(["\\n flex: 1;\\n width: 100%;\\n\\n margin: 10px 0;\\n \\n font-size: 0.9em;\\n font-weight: 100;\\n color: #a5a6a1;\\n\\n a.drillable-link {\\n color: #a5a6a1;\\n text-decoration: none;\\n }\\n a.drillable-link:hover {\\n text-decoration: underline;\\n }\\n"]);\n\n _templateObject6 = function _templateObject6() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject5() {\n var data = _taggedTemplateLiteral(["\\n font-size: 3em;\\n color: ", ";\\n\\n a.drillable-link {\\n color: ", ";\\n text-decoration: none;\\n }\\n a.drillable-link:hover {\\n text-decoration: underline;\\n }\\n"]);\n\n _templateObject5 = function _templateObject5() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject4() {\n var data = _taggedTemplateLiteral(["\\n font-weight: 100;\\n color: rgba(58,66,69,0.65);\\n margin: 5px 0;\\n"]);\n\n _templateObject4 = function _templateObject4() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject3() {\n var data = _taggedTemplateLiteral(["\\n display: flex;\\n flex-direction: ", ";\\n flex: 1;\\n"]);\n\n _templateObject3 = function _templateObject3() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject2() {\n var data = _taggedTemplateLiteral(["\\n margin: 20px 5px;\\n text-align: center;\\n width: 100%;\\n display: flex;\\n flex-direction: ", ";\\n align-items: center;\\n justify-content: center;\\n"]);\n\n _templateObject2 = function _templateObject2() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral(["\\n font-family: ", ";\\n display: flex;\\n flex-direction: ", ";\\n align-items: center;\\n justify-content: space-around;\\n margin: 10px;\\n height: 100%;\\n"]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\n\n\n\n\nvar DataPointsWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject(), function (props) {\n return props.font ? "".concat(props.font, ", sans-serif") : "\'Open Sans\', \'Noto Sans JP\', \'Noto Sans\', \'Noto Sans CJK KR\', Helvetica, Arial, sans-serif";\n}, function (props) {\n return props.layout === \'horizontal\' ? \'row\' : \'column\';\n});\nvar dataPointGroupDirectionDict = {\n \'below\': \'column\',\n \'above\': \'column-reverse\',\n \'left\': \'row-reverse\',\n \'right\': \'row\'\n};\nvar DataPointGroup = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject2(), function (props) {\n return props.comparisonPlacement ? dataPointGroupDirectionDict[props.comparisonPlacement] : \'column\';\n});\nvar DataPoint = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject3(), function (props) {\n return props.titlePlacement === \'above\' ? \'column\' : \'column-reverse\';\n});\nvar DataPointTitle = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject4());\nvar DataPointValue = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject5(), function (props) {\n return props.color;\n}, function (props) {\n return props.color;\n});\nvar ComparisonDataPoint = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject6());\nvar UpArrow = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject7());\nvar DownArrow = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject8());\nvar ComparisonPercentageChange = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject9(), function (props) {\n return props.value >= 0 ? \'green\' : \'red\';\n});\nvar ComparisonSimpleValue = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject10());\nvar ComparisonProgressBar = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject11(), function (props) {\n return props.background[0] ? Object(_common__WEBPACK_IMPORTED_MODULE_3__["lighten"])(props.background[0], 40) : \'#a5a6a1\';\n});\nvar ComparisonProgressBarFilled = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject12(), function (props) {\n return props.background[0] ? Object(_common__WEBPACK_IMPORTED_MODULE_3__["lighten"])(props.background[0], 20) : \'#a5a6a1\';\n}, function (props) {\n return props.percentage || 0;\n});\nvar ComparisonProgressBarLabel = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject13());\n\nvar GroupedCard =\n/*#__PURE__*/\nfunction (_React$PureComponent) {\n _inherits(GroupedCard, _React$PureComponent);\n\n function GroupedCard(props) {\n var _this;\n\n _classCallCheck(this, GroupedCard);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(GroupedCard).call(this, props));\n\n _defineProperty(_assertThisInitialized(_this), "getWindowSize", function () {\n return window.innerWidth > window.innerHeight ? window.innerWidth : window.innerHeight;\n });\n\n _defineProperty(_assertThisInitialized(_this), "calculateFontSize", function () {\n var multiplier = _this.state.groupingLayout === \'horizontal\' ? 0.015 : 0.02;\n return Math.round(_this.getWindowSize() * multiplier);\n });\n\n _defineProperty(_assertThisInitialized(_this), "recalculateSizing", function () {\n var groupingLayout = window.innerWidth >= 768 ? \'horizontal\' : \'vertical\'; // var font_size = this.calculateFontSize();\n\n var CONFIG = _this.props.config;\n console.log(CONFIG.font_size_main);\n var font_size = CONFIG.font_size_main != "" ? CONFIG.font_size_main : _this.calculateFontSize();\n console.log(font_size);\n\n _this.setState({\n fontSize: font_size,\n groupingLayout: groupingLayout\n });\n });\n\n _this.state = {};\n _this.state.groupingLayout = \'horizontal\';\n _this.state.fontSize = _this.calculateFontSize();\n return _this;\n }\n\n _createClass(GroupedCard, [{\n key: "componentDidMount",\n value: function componentDidMount() {\n window.addEventListener(\'resize\', this.recalculateSizing);\n }\n }, {\n key: "componentDidUpdate",\n value: function componentDidUpdate() {\n this.recalculateSizing();\n }\n }, {\n key: "componentWillUnmount",\n value: function componentWillUnmount() {\n window.removeEventListener(\'resize\', this.recalculateSizing);\n }\n }, {\n key: "render",\n value: function render() {\n var _this$props = this.props,\n config = _this$props.config,\n data = _this$props.data;\n var CONFIG = this.props.config;\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(DataPointsWrapper, {\n layout: this.state.groupingLayout,\n font: config[\'grouping_font\'],\n style: {\n fontSize: "".concat(this.state.fontSize, "px")\n }\n }, data.map(function (dataPoint, index) {\n var compDataPoint = dataPoint.comparison;\n var progressPerc;\n var percChange;\n\n if (compDataPoint) {\n progressPerc = Math.round(dataPoint.value / compDataPoint.value * 100);\n percChange = progressPerc - 100;\n progressPerc = progressPerc > 100 ? 100 : progressPerc;\n }\n\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(DataPointGroup, {\n comparisonPlacement: compDataPoint && config["comparison_label_placement_".concat(compDataPoint.name)],\n key: "group_".concat(dataPoint.name)\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(DataPoint, {\n titlePlacement: config["title_placement_".concat(dataPoint.name)]\n }, config["show_title_".concat(dataPoint.name)] === false ? null : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(DataPointTitle, null, config["title_overrride_".concat(dataPoint.name)] || dataPoint.label), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(DataPointValue, {\n color: config["style_".concat(dataPoint.name)]\n }, dataPoint.formattedValue)), !compDataPoint ? null : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ComparisonDataPoint, null, config["comparison_style_".concat(compDataPoint.name)] !== \'percentage_change\' ? null : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ComparisonPercentageChange, {\n value: percChange\n }, percChange >= 0 ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(UpArrow, null) : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(DownArrow, null), percChange >= 0 ? "+".concat(percChange) : percChange, "%"), config["comparison_style_".concat(compDataPoint.name)] !== \'value\' ? null : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ComparisonSimpleValue, null, compDataPoint.formattedValue), config["comparison_style_".concat(compDataPoint.name)] !== \'calculate_progress\' && config["comparison_style_".concat(compDataPoint.name)] !== \'calculate_progress_perc\' ? null : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ComparisonProgressBar, {\n background: config["style_".concat(dataPoint.name)]\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ComparisonProgressBarFilled, {\n background: config["style_".concat(dataPoint.name)],\n percentage: progressPerc\n }), config["comparison_show_label_".concat(compDataPoint.name)] === false ? null : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ComparisonProgressBarLabel, null, config["comparison_style_".concat(compDataPoint.name)] === \'calculate_progress\' ? null : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, "".concat(progressPerc, "% of "), compDataPoint.formattedValue), "\\xA0", config["comparison_label_".concat(compDataPoint.name)] || compDataPoint.label)), config["comparison_show_label_".concat(compDataPoint.name)] === false || config["comparison_style_".concat(compDataPoint.name)] === \'calculate_progress\' || config["comparison_style_".concat(compDataPoint.name)] === \'calculate_progress_perc\' ? null : config["comparison_label_".concat(compDataPoint.name)] || compDataPoint.label));\n }));\n }\n }]);\n\n return GroupedCard;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.PureComponent);\n\nGroupedCard.propTypes = {\n config: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.object,\n data: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.array\n};\n/* harmony default export */ __webpack_exports__["default"] = (GroupedCard);\n\n//# sourceURL=webpack://%5Bname%5D/./src/grouped_card/grouped_card.js?')},"./src/grouped_card/grouped_card_container.js": +/*! exports provided: default */function(module,__webpack_exports__,__webpack_require__){"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ "./node_modules/prop-types/index.js");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ "./node_modules/styled-components/dist/styled-components.browser.esm.js");\n/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../common */ "./src/common.js");\nfunction _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _templateObject13() {\n var data = _taggedTemplateLiteral(["\\n position: absolute;\\n top: 0;\\n width: 100%;\\n height: 40px;\\n text-align: center;\\n line-height: 40px; \\n color: #000000;\\n\\n a.drillable-link {\\n color: #000000;\\n }\\n"]);\n\n _templateObject13 = function _templateObject13() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject12() {\n var data = _taggedTemplateLiteral(["\\n background-color: ", ";\\n width: ", "%;\\n height: 40px;\\n"]);\n\n _templateObject12 = function _templateObject12() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject11() {\n var data = _taggedTemplateLiteral(["\\n position: relative;\\n background-color: ", ";\\n height: 40px;\\n text-align: center;\\n"]);\n\n _templateObject11 = function _templateObject11() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject10() {\n var data = _taggedTemplateLiteral(["\\n font-weight: 100;\\n display: inline-block;\\n padding-right: 5px;\\n"]);\n\n _templateObject10 = function _templateObject10() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject9() {\n var data = _taggedTemplateLiteral(["\\n display: inline-block;\\n color: ", "\\n padding-right: 5px;\\n"]);\n\n _templateObject9 = function _templateObject9() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject8() {\n var data = _taggedTemplateLiteral(["\\n display: inline-block; \\n width: 0; \\n height: 0; \\n border-left: 5px solid transparent;\\n border-right: 5px solid transparent;\\n border-top: 10px solid #f00;\\n margin-right: 5px;\\n"]);\n\n _templateObject8 = function _templateObject8() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject7() {\n var data = _taggedTemplateLiteral(["\\n display: inline-block;\\n width: 0; \\n height: 0; \\n border-left: 5px solid transparent;\\n border-right: 5px solid transparent;\\n border-bottom: 10px solid green;\\n margin-right: 5px;\\n"]);\n\n _templateObject7 = function _templateObject7() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject6() {\n var data = _taggedTemplateLiteral(["\\n flex: 1;\\n width: 100%;\\n\\n margin: 10px 0;\\n \\n font-size: 0.9em;\\n font-weight: 100;\\n color: #a5a6a1;\\n\\n a.drillable-link {\\n color: #a5a6a1;\\n text-decoration: none;\\n }\\n a.drillable-link:hover {\\n text-decoration: underline;\\n }\\n"]);\n\n _templateObject6 = function _templateObject6() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject5() {\n var data = _taggedTemplateLiteral(["\\n font-size: 3em;\\n color: ", ";\\n\\n a.drillable-link {\\n color: ", ";\\n text-decoration: none;\\n }\\n a.drillable-link:hover {\\n text-decoration: underline;\\n }\\n"]);\n\n _templateObject5 = function _templateObject5() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject4() {\n var data = _taggedTemplateLiteral(["\\n font-weight: 100;\\n color: rgba(58,66,69,0.65);\\n margin: 5px 0;\\n"]);\n\n _templateObject4 = function _templateObject4() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject3() {\n var data = _taggedTemplateLiteral(["\\n display: flex;\\n flex-direction: ", ";\\n flex: 1;\\n"]);\n\n _templateObject3 = function _templateObject3() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject2() {\n var data = _taggedTemplateLiteral(["\\n margin: 20px 5px;\\n text-align: center;\\n width: 100%;\\n display: flex;\\n flex-direction: ", ";\\n align-items: center;\\n justify-content: center;\\n"]);\n\n _templateObject2 = function _templateObject2() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral(["\\n font-family: ", ";\\n display: flex;\\n flex-direction: ", ";\\n align-items: center;\\n justify-content: space-around;\\n margin: 10px;\\n height: 100%;\\n"]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\n\n\n\n\nvar DataPointsWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject(), function (props) {\n return props.font ? "".concat(props.font, ", sans-serif") : "\'Open Sans\', \'Noto Sans JP\', \'Noto Sans\', \'Noto Sans CJK KR\', Helvetica, Arial, sans-serif";\n}, function (props) {\n return props.layout === \'horizontal\' ? \'row\' : \'column\';\n});\nvar dataPointGroupDirectionDict = {\n \'below\': \'column\',\n \'above\': \'column-reverse\',\n \'left\': \'row-reverse\',\n \'right\': \'row\'\n};\nvar DataPointGroup = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject2(), function (props) {\n return props.comparisonPlacement ? dataPointGroupDirectionDict[props.comparisonPlacement] : \'column\';\n});\nvar DataPoint = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject3(), function (props) {\n return props.titlePlacement === \'above\' ? \'column\' : \'column-reverse\';\n});\nvar DataPointTitle = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject4());\nvar DataPointValue = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject5(), function (props) {\n return props.color;\n}, function (props) {\n return props.color;\n});\nvar ComparisonDataPoint = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject6());\nvar UpArrow = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject7());\nvar DownArrow = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject8());\nvar ComparisonPercentageChange = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject9(), function (props) {\n return props.value >= 0 ? \'green\' : \'red\';\n});\nvar ComparisonSimpleValue = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject10());\nvar ComparisonProgressBar = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject11(), function (props) {\n return props.background[0] ? Object(_common__WEBPACK_IMPORTED_MODULE_3__["lighten"])(props.background[0], 40) : \'#a5a6a1\';\n});\nvar ComparisonProgressBarFilled = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject12(), function (props) {\n return props.background[0] ? Object(_common__WEBPACK_IMPORTED_MODULE_3__["lighten"])(props.background[0], 20) : \'#a5a6a1\';\n}, function (props) {\n return props.percentage || 0;\n});\nvar ComparisonProgressBarLabel = styled_components__WEBPACK_IMPORTED_MODULE_2__["default"].div(_templateObject13());\n\nvar GroupedCard =\n/*#__PURE__*/\nfunction (_React$PureComponent) {\n _inherits(GroupedCard, _React$PureComponent);\n\n function GroupedCard(props) {\n var _this;\n\n _classCallCheck(this, GroupedCard);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(GroupedCard).call(this, props));\n\n _defineProperty(_assertThisInitialized(_this), "getWindowSize", function () {\n return window.innerWidth > window.innerHeight ? window.innerWidth : window.innerHeight;\n });\n\n _defineProperty(_assertThisInitialized(_this), "calculateFontSize", function () {\n var multiplier = _this.state.groupingLayout === \'horizontal\' ? 0.015 : 0.02;\n return Math.round(_this.getWindowSize() * multiplier);\n });\n\n _defineProperty(_assertThisInitialized(_this), "recalculateSizing", function () {\n var groupingLayout = window.innerWidth >= 768 ? \'horizontal\' : \'vertical\'; // var font_size = this.calculateFontSize();\n\n var CONFIG = _this.props.config; // console.log(CONFIG.font_size_main);\n\n var font_size = CONFIG.font_size_main != "" ? CONFIG.font_size_main : _this.calculateFontSize(); // console.log(font_size);\n\n _this.setState({\n fontSize: font_size,\n groupingLayout: groupingLayout\n });\n });\n\n _this.state = {};\n _this.state.groupingLayout = \'horizontal\';\n _this.state.fontSize = _this.calculateFontSize();\n return _this;\n }\n\n _createClass(GroupedCard, [{\n key: "componentDidMount",\n value: function componentDidMount() {\n window.addEventListener(\'resize\', this.recalculateSizing);\n }\n }, {\n key: "componentDidUpdate",\n value: function componentDidUpdate() {\n this.recalculateSizing();\n }\n }, {\n key: "componentWillUnmount",\n value: function componentWillUnmount() {\n window.removeEventListener(\'resize\', this.recalculateSizing);\n }\n }, {\n key: "render",\n value: function render() {\n var _this$props = this.props,\n config = _this$props.config,\n data = _this$props.data;\n var CONFIG = this.props.config;\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(DataPointsWrapper, {\n layout: this.state.groupingLayout,\n font: config[\'grouping_font\'],\n style: {\n fontSize: "".concat(this.state.fontSize, "px")\n }\n }, data.map(function (dataPoint, index) {\n var compDataPoint = dataPoint.comparison;\n var progressPerc;\n var percChange;\n\n if (compDataPoint) {\n progressPerc = Math.round(dataPoint.value / compDataPoint.value * 100);\n percChange = progressPerc - 100;\n progressPerc = progressPerc > 100 ? 100 : progressPerc;\n }\n\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(DataPointGroup, {\n comparisonPlacement: compDataPoint && config["comparison_label_placement_".concat(compDataPoint.name)],\n key: "group_".concat(dataPoint.name)\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(DataPoint, {\n titlePlacement: config["title_placement_".concat(dataPoint.name)]\n }, config["show_title_".concat(dataPoint.name)] === false ? null : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(DataPointTitle, null, config["title_overrride_".concat(dataPoint.name)] || dataPoint.label), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(DataPointValue, {\n color: config["style_".concat(dataPoint.name)]\n }, dataPoint.formattedValue)), !compDataPoint ? null : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ComparisonDataPoint, null, config["comparison_style_".concat(compDataPoint.name)] !== \'percentage_change\' ? null : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ComparisonPercentageChange, {\n value: percChange\n }, percChange >= 0 ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(UpArrow, null) : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(DownArrow, null), percChange >= 0 ? "+".concat(percChange) : percChange, "%"), config["comparison_style_".concat(compDataPoint.name)] !== \'value\' ? null : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ComparisonSimpleValue, null, compDataPoint.formattedValue), config["comparison_style_".concat(compDataPoint.name)] !== \'calculate_progress\' && config["comparison_style_".concat(compDataPoint.name)] !== \'calculate_progress_perc\' ? null : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ComparisonProgressBar, {\n background: config["style_".concat(dataPoint.name)]\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ComparisonProgressBarFilled, {\n background: config["style_".concat(dataPoint.name)],\n percentage: progressPerc\n }), config["comparison_show_label_".concat(compDataPoint.name)] === false ? null : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ComparisonProgressBarLabel, null, config["comparison_style_".concat(compDataPoint.name)] === \'calculate_progress\' ? null : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, "".concat(progressPerc, "% of "), compDataPoint.formattedValue), "\\xA0", config["comparison_label_".concat(compDataPoint.name)] || compDataPoint.label)), config["comparison_show_label_".concat(compDataPoint.name)] === false || config["comparison_style_".concat(compDataPoint.name)] === \'calculate_progress\' || config["comparison_style_".concat(compDataPoint.name)] === \'calculate_progress_perc\' ? null : config["comparison_label_".concat(compDataPoint.name)] || compDataPoint.label));\n }));\n }\n }]);\n\n return GroupedCard;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.PureComponent);\n\nGroupedCard.propTypes = {\n config: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.object,\n data: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.array\n};\n/* harmony default export */ __webpack_exports__["default"] = (GroupedCard);\n\n//# sourceURL=webpack://%5Bname%5D/./src/grouped_card/grouped_card.js?')},"./src/grouped_card/grouped_card_container.js": /*!****************************************************!*\ !*** ./src/grouped_card/grouped_card_container.js ***! \****************************************************/ diff --git a/dist/multiple_gauge_charts.js b/dist/multiple_gauge_charts.js index 06d66135..45853e68 100644 --- a/dist/multiple_gauge_charts.js +++ b/dist/multiple_gauge_charts.js @@ -2194,8 +2194,8 @@ /*!**************************************************!*\ !*** ./src/multiple_gauge_charts/gauge_chart.js ***! \**************************************************/ -/*! exports provided: default */function(module,__webpack_exports__,__webpack_require__){"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ "./node_modules/styled-components/dist/styled-components.browser.esm.js");\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! d3 */ "./node_modules/d3/index.js");\nfunction _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral(["\\n text-align: center;\\n "]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\nvar GaugeChart =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(GaugeChart, _Component);\n\n function GaugeChart(props) {\n var _this;\n\n _classCallCheck(this, GaugeChart);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(GaugeChart).call(this, props)); // list of d3 refs to share within the components\n\n _defineProperty(_assertThisInitialized(_this), "render", function () {\n var GaugeChartWrapper = styled_components__WEBPACK_IMPORTED_MODULE_1__["default"].div(_templateObject());\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(GaugeChartWrapper, {\n ref: function ref(_ref) {\n return _this.gaugeDiv = _ref;\n }\n });\n });\n\n _this._d3_refs = {\n powerGauge: false\n };\n _this.initialValue = 0;\n return _this;\n }\n\n _createClass(GaugeChart, [{\n key: "componentDidMount",\n value: function componentDidMount() {\n this.renderGauge();\n }\n }, {\n key: "componentDidUpdate",\n value: function componentDidUpdate() {\n this.renderGauge();\n }\n }, {\n key: "getGauge",\n value: function getGauge() {\n var self = this; // save reference\n\n var CONFIG = this.props.config;\n var DATA = this.props.data;\n var width = this.props.width;\n var height = this.props.height;\n var colors = this.props.colors;\n var containerHeight = this.props.height;\n var target = this.props.target;\n var title = this.props.title;\n var title_display = this.props.title_display;\n var arc_range = this.props.range;\n var value_format = this.props.value_format;\n var formatted_value = this.props.formatted_value;\n var percentage = this.props.percentage;\n console.log(width);\n console.log(height);\n var size = window.innerWidth;\n var displayLabels = size >= 300;\n\n if (!displayLabels) {\n size -= Math.round(size * 0.4);\n }\n\n return function (container) {\n var _new_config;\n\n //Default Values\n var default_config = {\n size: 700,\n clipWidth: width,\n clipHeight: height,\n ringInset: 45,\n ringInset2: 5,\n ringWidth2: 1,\n pointerWidth: 10,\n pointerTailLength: 5,\n pointerHeadLengthPercent: 0.9,\n minAngle: -90,\n maxAngle: 90,\n transitionMs: 750,\n labelInset: 35,\n currentLabelInset: 40,\n smallPointerInset: 15,\n smallPointerWidth: 20,\n labelFormat: d3__WEBPACK_IMPORTED_MODULE_2__["format"](".1s")\n }; //Configuration from Props\n\n var new_config = (_new_config = {\n containerHeight: height,\n percentage: percentage,\n ringWidth: CONFIG.thickness,\n segments: CONFIG.segments,\n font_size_arc: CONFIG.font_size_arc,\n font_size_main: CONFIG.font_size_main,\n title: title,\n main_value: DATA,\n formatted_value: formatted_value,\n title_display: title_display,\n font_size_title: CONFIG.font_size_title,\n font_size_target: CONFIG.font_size_target,\n value_format: value_format,\n target_display: CONFIG.target_display,\n target_value: target,\n target_label: CONFIG.target_label,\n target_color: CONFIG.target_color,\n color_by: CONFIG.color_by,\n colors: colors,\n arc_range: arc_range,\n enable_drilling: CONFIG.enable_drilling,\n kFormatter: CONFIG.kformatter\n }, _defineProperty(_new_config, "target_label", CONFIG.target_label), _defineProperty(_new_config, "arcColorFn", d3__WEBPACK_IMPORTED_MODULE_2__["interpolateHsl"](d3__WEBPACK_IMPORTED_MODULE_2__["rgb"](colors[0]), d3__WEBPACK_IMPORTED_MODULE_2__["rgb"](colors[1]))), _new_config);\n\n var config = _objectSpread({}, default_config, {}, new_config);\n\n var range = undefined;\n var r = undefined;\n var pointerHeadLength = undefined;\n var svg = undefined;\n var arc = undefined;\n var percentageBG = undefined;\n var percentageFG = undefined;\n var targetArc = undefined;\n var scale = undefined;\n var ticks = undefined;\n var tickData = undefined;\n var text = undefined;\n var percentageData = undefined;\n var dataPoints = [{\n value: config.main_value.value\n }];\n\n function deg2rad(deg) {\n return deg * Math.PI / 180;\n }\n\n function configure() {\n range = config.maxAngle - config.minAngle;\n r = width * .95 / 2;\n pointerHeadLength = Math.round(r * config.pointerHeadLengthPercent);\n scale = d3__WEBPACK_IMPORTED_MODULE_2__["scaleLinear"]().range([0, 1]).domain(config.arc_range ? config.arc_range : [0, 10000]);\n ticks = scale.ticks(config.segments);\n tickData = d3__WEBPACK_IMPORTED_MODULE_2__["range"](config.segments).map(function () {\n return 1 / config.segments;\n }); //Target Values\n\n percentageData = [[config.pointerWidth / 2, 0], [0, -pointerHeadLength], [-(config.pointerWidth / 2), 0], [0, config.pointerTailLength], [config.pointerWidth / 2, 0]]; // Create Main Arc\n\n arc = d3__WEBPACK_IMPORTED_MODULE_2__["arc"]().innerRadius(r - config.ringWidth - config.ringInset).outerRadius(r - config.ringInset).startAngle(function (d, i) {\n var ratio = d * i;\n return deg2rad(config.minAngle + ratio * range);\n }).endAngle(function (d, i) {\n var ratio = d * (i + 1);\n return deg2rad(config.minAngle + ratio * range);\n }); // Create Target Arc\n\n config.target_display == true ? targetArc = d3__WEBPACK_IMPORTED_MODULE_2__["arc"]().innerRadius(r - config.ringWidth2 - config.ringInset2).outerRadius(r - config.ringInset2).startAngle(-90 * (Math.PI / 180)).endAngle(90 * (Math.PI / 180)) : null;\n }\n\n function centerTranslation() {\n return "translate(" + r + "," + r + ")";\n }\n\n function isRendered() {\n return svg !== undefined;\n } //Render the actual component\n\n\n function render(newValue) {\n svg = d3__WEBPACK_IMPORTED_MODULE_2__["select"](container).append("svg:svg").attr("class", "gauge").attr("width", "100%").style(\'text-align\', \'center\').attr("height", "100%").attr("viewBox", "0" + " " + "0" + " " + config.clipWidth + " " + config.clipHeight); //.attr("preserveAspectRatio", "xMinYMin meet");\n\n var centerTx = centerTranslation(); //Render Main Arc\n\n var arcs = svg.append("g").attr("class", "arc").attr("transform", centerTx);\n arcs.selectAll("path").data(tickData).enter().append("path").attr("fill", function (d, i) {\n var newColors = config.color_by == "segment" // if color by segment?\n ? config.colors[i] : config.arcColorFn(d * i); // else color by range\n\n return newColors;\n }).attr("d", arc); //Render Target Arc\n\n var targetArcs = svg.append("g").attr("class", "arc").attr("transform", centerTx);\n targetArcs.append("path").attr("d", targetArc).attr("fill", config.target_color); //Render Segment Values Arc\n\n if (displayLabels == true) {\n var lg = svg.append("g").attr("transform", centerTx);\n lg.selectAll("text").data(ticks).enter().append("text").attr("text-anchor", "middle").attr("font-size", config.font_size_arc + "px").attr("transform", function (d) {\n var ratio = scale(d);\n var newAngle = config.minAngle + ratio * range;\n return "rotate(" + newAngle + ") translate(0," + (config.labelInset - r) + ")";\n }).text(config.labelFormat);\n lg.select("text:first-child").attr("text-anchor", "start").attr("transform", "rotate(0) translate(-" + (config.clipWidth / 2 - config.ringInset) + ",20)");\n lg.select("text:last-child").attr("text-anchor", "end").attr("transform", "rotate(0) translate(" + (config.clipWidth / 2 - config.ringInset) + ",20)");\n } //Pointer Values\n\n\n var lineData = [[config.pointerWidth / 2, 0], [0, -pointerHeadLength], [-(config.pointerWidth / 2), 0], [0, config.pointerTailLength], [config.pointerWidth / 2, 0]]; //Target Values\n\n var targetData = [[0, config.smallPointerInset - r], [-config.smallPointerWidth / 2, config.smallPointerInset - r - config.smallPointerWidth / 2], [config.smallPointerWidth / 2, config.smallPointerInset - r - config.smallPointerWidth / 2]];\n var pointerLine = d3__WEBPACK_IMPORTED_MODULE_2__["line"]().curve(d3__WEBPACK_IMPORTED_MODULE_2__["curveLinear"]);\n\n if (config.percentage === false) {\n //Render Pointer\n var pg = svg.append("g").data([lineData]).attr("class", "pointer").attr("transform", centerTx);\n self._d3_refs.pointer = pg.append("path").attr("d", pointerLine).attr("transform", "rotate(" + config.minAngle + ")");\n } else {\n var ratio = scale(config.main_value[0].value * 100);\n var newAngle = deg2rad(config.minAngle + ratio * range);\n percentageBG = d3__WEBPACK_IMPORTED_MODULE_2__["arc"]().innerRadius(r - config.ringWidth - config.ringInset).outerRadius(r - config.ringInset).startAngle(-90 * (Math.PI / 180)).endAngle(90 * (Math.PI / 180));\n var percentageBlock = svg.append("g").attr("transform", centerTx);\n self._d3_refs.percentageBG = percentageBlock.append("path").attr("class", "percentage_bg").attr("d", percentageBG).attr("fill", config.colors[0]);\n percentageFG = d3__WEBPACK_IMPORTED_MODULE_2__["arc"]().innerRadius(r - config.ringWidth - config.ringInset).outerRadius(r - config.ringInset).startAngle(-90 * (Math.PI / 180)).endAngle(newAngle);\n self._d3_refs.percentageFG = percentageBlock.append("path").attr("class", "target").attr("d", percentageFG).attr("fill", config.colors[1]);\n } //Render Target Pointer\n\n\n var smallPointer = svg.append("g").attr("class", "tickline").attr("transform", centerTx);\n\n if (config.target_display == true) {\n self._d3_refs.sp = smallPointer.append("path").attr("class", "target").attr("d", pointerLine(targetData)).attr("transform", "rotate(" + config.minAngle + ")").attr("fill", config.target_color);\n }\n\n function kFormatter(num) {\n if (Math.abs(num) > 999999999) {\n return Math.sign(num) * (Math.abs(num) / 1000000000).toFixed(1) + "B";\n } else if (Math.abs(num) > 999999) {\n return Math.sign(num) * (Math.abs(num) / 1000000).toFixed(1) + "M";\n } else if (Math.abs(num) > 999) {\n return Math.sign(num) * (Math.abs(num) / 1000).toFixed(1) + "k";\n } else if (Math.abs(num) < 1) {\n return Math.sign(num) * (Math.abs(num) * 100).toFixed(1) + "%";\n } else {\n return Math.sign(num) * Math.abs(num);\n }\n }\n\n if (displayLabels == true) {\n //Renders Big Value\n var bigValue = svg.append("text").text(config.formatted_value).attr("transform", config.percentage === false ? "translate(" + r + "," + (r - 70) + ")" : centerTx).attr("text-anchor", "middle").attr("font-size", config.font_size_main + "px").attr("fill", "#3a4245").attr("class", "looker-vis-context-value-text");\n } //Create the title for the legend\n\n\n if (config.title_display === true && displayLabels) {\n text = svg.append("text").text(config.title).attr("transform", config.percentage === false ? "translate(" + r + "," + (r - 20) + ")" : "translate(" + r + "," + (r - 70) + ")").attr("text-anchor", "middle").attr("font-size", config.font_size_title).attr("font-weight", 100).attr("fill", "#3a4245").attr("class", "looker-vis-context-title-text");\n } //Renders Target if enabled\n\n\n if (config.target_display === true && displayLabels) {\n text = svg.append("text").attr("class", "target__title").attr("transform", "translate(" + (config.clipWidth - 110) + "," + config.font_size_target + ")").attr("text-anchor", "middle").attr("font-size", config.font_size_target).attr("fill", config.target_color).text(config.target_label + " " + kFormatter(config.target_value));\n }\n\n update(newValue === undefined ? 0 : newValue);\n } //Updates Gauge with new Values\n\n\n function update() {\n var amount = config.percentage ? config.main_value[0].value * 100 : config.main_value[0].value;\n var ratio = scale(amount);\n var newAngle = config.minAngle + ratio * range;\n var secondValueRatio = scale(config.target_value > config.maxValue ? config.maxValue : config.target_value);\n var secondValueAngle = config.minAngle + secondValueRatio * range;\n\n if (config.target_display == true) {\n self._d3_refs.sp // .transition()\n // .duration(config.transitionMs)\n // .ease(d3.easeExpOut)\n .attr("transform", "rotate(" + secondValueAngle + ")");\n }\n\n if (config.percentage === false) {\n self._d3_refs.pointer // .transition()\n // .duration(config.transitionMs)\n // .ease(d3.easeExpOut)\n .attr("transform", "rotate(" + newAngle + ")");\n } else {\n self._d3_refs.percentageBG.transition().duration(config.transitionMs).ease(d3__WEBPACK_IMPORTED_MODULE_2__["easeExpOut"]);\n\n self._d3_refs.percentageFG.transition().duration(config.transitionMs).ease(d3__WEBPACK_IMPORTED_MODULE_2__["easeExpOut"]);\n }\n }\n\n configure();\n return {\n configure: configure,\n isRendered: isRendered,\n render: render,\n update: update,\n // exposing the config object\n config: config\n };\n };\n }\n }, {\n key: "renderGauge",\n value: function renderGauge() {\n d3__WEBPACK_IMPORTED_MODULE_2__["select"](this.gaugeDiv).select("svg").remove();\n this._d3_refs.powerGauge = this.getGauge()(this.gaugeDiv);\n\n this._d3_refs.powerGauge.render();\n\n this.updateReadings();\n }\n }, {\n key: "updateReadings",\n value: function updateReadings() {\n // updates the readings of the gauge with the current prop value\n // animates between old prop value and current prop value\n this._d3_refs.powerGauge.update();\n }\n }]);\n\n return GaugeChart;\n}(react__WEBPACK_IMPORTED_MODULE_0__["Component"]);\n\n/* harmony default export */ __webpack_exports__["default"] = (GaugeChart);\n\n//# sourceURL=webpack://%5Bname%5D/./src/multiple_gauge_charts/gauge_chart.js?')},"./src/multiple_gauge_charts/multiple_gauge_charts_container.js": +/*! exports provided: default */function(module,__webpack_exports__,__webpack_require__){"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ "./node_modules/styled-components/dist/styled-components.browser.esm.js");\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! d3 */ "./node_modules/d3/index.js");\nfunction _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral(["\\n text-align: center;\\n "]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\nvar GaugeChart =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(GaugeChart, _Component);\n\n function GaugeChart(props) {\n var _this;\n\n _classCallCheck(this, GaugeChart);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(GaugeChart).call(this, props)); // list of d3 refs to share within the components\n\n _defineProperty(_assertThisInitialized(_this), "render", function () {\n var GaugeChartWrapper = styled_components__WEBPACK_IMPORTED_MODULE_1__["default"].div(_templateObject());\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(GaugeChartWrapper, {\n ref: function ref(_ref) {\n return _this.gaugeDiv = _ref;\n }\n });\n });\n\n _this._d3_refs = {\n powerGauge: false\n };\n _this.initialValue = 0;\n return _this;\n }\n\n _createClass(GaugeChart, [{\n key: "componentDidMount",\n value: function componentDidMount() {\n this.renderGauge();\n }\n }, {\n key: "componentDidUpdate",\n value: function componentDidUpdate() {\n this.renderGauge();\n }\n }, {\n key: "getGauge",\n value: function getGauge() {\n var self = this; // save reference\n\n var CONFIG = this.props.config;\n var DATA = this.props.data;\n var width = this.props.width;\n var height = this.props.height;\n var colors = this.props.colors;\n var containerHeight = this.props.height;\n var target = this.props.target;\n var title = this.props.title;\n var title_display = this.props.title_display;\n var arc_range = this.props.range;\n var value_format = this.props.value_format;\n var formatted_value = this.props.formatted_value;\n var percentage = this.props.percentage; // console.log(width);\n // console.log(height);\n\n var size = window.innerWidth;\n var displayLabels = size >= 300;\n\n if (!displayLabels) {\n size -= Math.round(size * 0.4);\n }\n\n return function (container) {\n var _new_config;\n\n //Default Values\n var default_config = {\n size: 700,\n clipWidth: width,\n clipHeight: height,\n ringInset: 45,\n ringInset2: 5,\n ringWidth2: 1,\n pointerWidth: 10,\n pointerTailLength: 5,\n pointerHeadLengthPercent: 0.9,\n minAngle: -90,\n maxAngle: 90,\n transitionMs: 750,\n labelInset: 35,\n currentLabelInset: 40,\n smallPointerInset: 15,\n smallPointerWidth: 20,\n labelFormat: d3__WEBPACK_IMPORTED_MODULE_2__["format"](".1s")\n }; //Configuration from Props\n\n var new_config = (_new_config = {\n containerHeight: height,\n percentage: percentage,\n ringWidth: CONFIG.thickness,\n segments: CONFIG.segments,\n font_size_arc: CONFIG.font_size_arc,\n font_size_main: CONFIG.font_size_main,\n title: title,\n main_value: DATA,\n formatted_value: formatted_value,\n title_display: title_display,\n font_size_title: CONFIG.font_size_title,\n font_size_target: CONFIG.font_size_target,\n value_format: value_format,\n target_display: CONFIG.target_display,\n target_value: target,\n target_label: CONFIG.target_label,\n target_color: CONFIG.target_color,\n color_by: CONFIG.color_by,\n colors: colors,\n arc_range: arc_range,\n enable_drilling: CONFIG.enable_drilling,\n kFormatter: CONFIG.kformatter\n }, _defineProperty(_new_config, "target_label", CONFIG.target_label), _defineProperty(_new_config, "arcColorFn", d3__WEBPACK_IMPORTED_MODULE_2__["interpolateHsl"](d3__WEBPACK_IMPORTED_MODULE_2__["rgb"](colors[0]), d3__WEBPACK_IMPORTED_MODULE_2__["rgb"](colors[1]))), _new_config);\n\n var config = _objectSpread({}, default_config, {}, new_config);\n\n var range = undefined;\n var r = undefined;\n var pointerHeadLength = undefined;\n var svg = undefined;\n var arc = undefined;\n var percentageBG = undefined;\n var percentageFG = undefined;\n var targetArc = undefined;\n var scale = undefined;\n var ticks = undefined;\n var tickData = undefined;\n var text = undefined;\n var percentageData = undefined;\n var dataPoints = [{\n value: config.main_value.value\n }];\n\n function deg2rad(deg) {\n return deg * Math.PI / 180;\n }\n\n function configure() {\n range = config.maxAngle - config.minAngle;\n r = width * .95 / 2;\n pointerHeadLength = Math.round(r * config.pointerHeadLengthPercent);\n scale = d3__WEBPACK_IMPORTED_MODULE_2__["scaleLinear"]().range([0, 1]).domain(config.arc_range ? config.arc_range : [0, 10000]);\n ticks = scale.ticks(config.segments);\n tickData = d3__WEBPACK_IMPORTED_MODULE_2__["range"](config.segments).map(function () {\n return 1 / config.segments;\n }); //Target Values\n\n percentageData = [[config.pointerWidth / 2, 0], [0, -pointerHeadLength], [-(config.pointerWidth / 2), 0], [0, config.pointerTailLength], [config.pointerWidth / 2, 0]]; // Create Main Arc\n\n arc = d3__WEBPACK_IMPORTED_MODULE_2__["arc"]().innerRadius(r - config.ringWidth - config.ringInset).outerRadius(r - config.ringInset).startAngle(function (d, i) {\n var ratio = d * i;\n return deg2rad(config.minAngle + ratio * range);\n }).endAngle(function (d, i) {\n var ratio = d * (i + 1);\n return deg2rad(config.minAngle + ratio * range);\n }); // Create Target Arc\n\n config.target_display == true ? targetArc = d3__WEBPACK_IMPORTED_MODULE_2__["arc"]().innerRadius(r - config.ringWidth2 - config.ringInset2).outerRadius(r - config.ringInset2).startAngle(-90 * (Math.PI / 180)).endAngle(90 * (Math.PI / 180)) : null;\n }\n\n function centerTranslation() {\n return "translate(" + r + "," + r + ")";\n }\n\n function isRendered() {\n return svg !== undefined;\n } //Render the actual component\n\n\n function render(newValue) {\n svg = d3__WEBPACK_IMPORTED_MODULE_2__["select"](container).append("svg:svg").attr("class", "gauge").attr("width", "100%").style(\'text-align\', \'center\').attr("height", "100%").attr("viewBox", "0" + " " + "0" + " " + config.clipWidth + " " + config.clipHeight); //.attr("preserveAspectRatio", "xMinYMin meet");\n\n var centerTx = centerTranslation(); //Render Main Arc\n\n var arcs = svg.append("g").attr("class", "arc").attr("transform", centerTx);\n arcs.selectAll("path").data(tickData).enter().append("path").attr("fill", function (d, i) {\n var newColors = config.color_by == "segment" // if color by segment?\n ? config.colors[i] : config.arcColorFn(d * i); // else color by range\n\n return newColors;\n }).attr("d", arc); //Render Target Arc\n\n var targetArcs = svg.append("g").attr("class", "arc").attr("transform", centerTx);\n targetArcs.append("path").attr("d", targetArc).attr("fill", config.target_color); //Render Segment Values Arc\n\n if (displayLabels == true) {\n var lg = svg.append("g").attr("transform", centerTx);\n lg.selectAll("text").data(ticks).enter().append("text").attr("text-anchor", "middle").attr("font-size", config.font_size_arc + "px").attr("transform", function (d) {\n var ratio = scale(d);\n var newAngle = config.minAngle + ratio * range;\n return "rotate(" + newAngle + ") translate(0," + (config.labelInset - r) + ")";\n }).text(config.labelFormat);\n lg.select("text:first-child").attr("text-anchor", "start").attr("transform", "rotate(0) translate(-" + (config.clipWidth / 2 - config.ringInset) + ",20)");\n lg.select("text:last-child").attr("text-anchor", "end").attr("transform", "rotate(0) translate(" + (config.clipWidth / 2 - config.ringInset) + ",20)");\n } //Pointer Values\n\n\n var lineData = [[config.pointerWidth / 2, 0], [0, -pointerHeadLength], [-(config.pointerWidth / 2), 0], [0, config.pointerTailLength], [config.pointerWidth / 2, 0]]; //Target Values\n\n var targetData = [[0, config.smallPointerInset - r], [-config.smallPointerWidth / 2, config.smallPointerInset - r - config.smallPointerWidth / 2], [config.smallPointerWidth / 2, config.smallPointerInset - r - config.smallPointerWidth / 2]];\n var pointerLine = d3__WEBPACK_IMPORTED_MODULE_2__["line"]().curve(d3__WEBPACK_IMPORTED_MODULE_2__["curveLinear"]);\n\n if (config.percentage === false) {\n //Render Pointer\n var pg = svg.append("g").data([lineData]).attr("class", "pointer").attr("transform", centerTx);\n self._d3_refs.pointer = pg.append("path").attr("d", pointerLine).attr("transform", "rotate(" + config.minAngle + ")");\n } else {\n var ratio = scale(config.main_value[0].value * 100);\n var newAngle = deg2rad(config.minAngle + ratio * range);\n percentageBG = d3__WEBPACK_IMPORTED_MODULE_2__["arc"]().innerRadius(r - config.ringWidth - config.ringInset).outerRadius(r - config.ringInset).startAngle(-90 * (Math.PI / 180)).endAngle(90 * (Math.PI / 180));\n var percentageBlock = svg.append("g").attr("transform", centerTx);\n self._d3_refs.percentageBG = percentageBlock.append("path").attr("class", "percentage_bg").attr("d", percentageBG).attr("fill", config.colors[0]);\n percentageFG = d3__WEBPACK_IMPORTED_MODULE_2__["arc"]().innerRadius(r - config.ringWidth - config.ringInset).outerRadius(r - config.ringInset).startAngle(-90 * (Math.PI / 180)).endAngle(newAngle);\n self._d3_refs.percentageFG = percentageBlock.append("path").attr("class", "target").attr("d", percentageFG).attr("fill", config.colors[1]);\n } //Render Target Pointer\n\n\n var smallPointer = svg.append("g").attr("class", "tickline").attr("transform", centerTx);\n\n if (config.target_display == true) {\n self._d3_refs.sp = smallPointer.append("path").attr("class", "target").attr("d", pointerLine(targetData)).attr("transform", "rotate(" + config.minAngle + ")").attr("fill", config.target_color);\n }\n\n function kFormatter(num) {\n if (Math.abs(num) > 999999999) {\n return Math.sign(num) * (Math.abs(num) / 1000000000).toFixed(1) + "B";\n } else if (Math.abs(num) > 999999) {\n return Math.sign(num) * (Math.abs(num) / 1000000).toFixed(1) + "M";\n } else if (Math.abs(num) > 999) {\n return Math.sign(num) * (Math.abs(num) / 1000).toFixed(1) + "k";\n } else if (Math.abs(num) < 1) {\n return Math.sign(num) * (Math.abs(num) * 100).toFixed(1) + "%";\n } else {\n return Math.sign(num) * Math.abs(num);\n }\n }\n\n if (displayLabels == true) {\n //Renders Big Value\n var bigValue = svg.append("text").text(config.formatted_value).attr("transform", config.percentage === false ? "translate(" + r + "," + (r - 70) + ")" : centerTx).attr("text-anchor", "middle").attr("font-size", config.font_size_main + "px").attr("fill", "#3a4245").attr("class", "looker-vis-context-value-text");\n } //Create the title for the legend\n\n\n if (config.title_display === true && displayLabels) {\n text = svg.append("text").text(config.title).attr("transform", config.percentage === false ? "translate(" + r + "," + (r - 20) + ")" : "translate(" + r + "," + (r - 70) + ")").attr("text-anchor", "middle").attr("font-size", config.font_size_title).attr("font-weight", 100).attr("fill", "#3a4245").attr("class", "looker-vis-context-title-text");\n } //Renders Target if enabled\n\n\n if (config.target_display === true && displayLabels) {\n text = svg.append("text").attr("class", "target__title").attr("transform", "translate(" + (config.clipWidth - 110) + "," + config.font_size_target + ")").attr("text-anchor", "middle").attr("font-size", config.font_size_target).attr("fill", config.target_color).text(config.target_label + " " + kFormatter(config.target_value));\n }\n\n update(newValue === undefined ? 0 : newValue);\n } //Updates Gauge with new Values\n\n\n function update() {\n var amount = config.percentage ? config.main_value[0].value * 100 : config.main_value[0].value;\n var ratio = scale(amount);\n var newAngle = config.minAngle + ratio * range;\n var secondValueRatio = scale(config.target_value > config.maxValue ? config.maxValue : config.target_value);\n var secondValueAngle = config.minAngle + secondValueRatio * range;\n\n if (config.target_display == true) {\n self._d3_refs.sp // .transition()\n // .duration(config.transitionMs)\n // .ease(d3.easeExpOut)\n .attr("transform", "rotate(" + secondValueAngle + ")");\n }\n\n if (config.percentage === false) {\n self._d3_refs.pointer // .transition()\n // .duration(config.transitionMs)\n // .ease(d3.easeExpOut)\n .attr("transform", "rotate(" + newAngle + ")");\n } else {\n self._d3_refs.percentageBG.transition().duration(config.transitionMs).ease(d3__WEBPACK_IMPORTED_MODULE_2__["easeExpOut"]);\n\n self._d3_refs.percentageFG.transition().duration(config.transitionMs).ease(d3__WEBPACK_IMPORTED_MODULE_2__["easeExpOut"]);\n }\n }\n\n configure();\n return {\n configure: configure,\n isRendered: isRendered,\n render: render,\n update: update,\n // exposing the config object\n config: config\n };\n };\n }\n }, {\n key: "renderGauge",\n value: function renderGauge() {\n d3__WEBPACK_IMPORTED_MODULE_2__["select"](this.gaugeDiv).select("svg").remove();\n this._d3_refs.powerGauge = this.getGauge()(this.gaugeDiv);\n\n this._d3_refs.powerGauge.render();\n\n this.updateReadings();\n }\n }, {\n key: "updateReadings",\n value: function updateReadings() {\n // updates the readings of the gauge with the current prop value\n // animates between old prop value and current prop value\n this._d3_refs.powerGauge.update();\n }\n }]);\n\n return GaugeChart;\n}(react__WEBPACK_IMPORTED_MODULE_0__["Component"]);\n\n/* harmony default export */ __webpack_exports__["default"] = (GaugeChart);\n\n//# sourceURL=webpack://%5Bname%5D/./src/multiple_gauge_charts/gauge_chart.js?')},"./src/multiple_gauge_charts/multiple_gauge_charts_container.js": /*!**********************************************************************!*\ !*** ./src/multiple_gauge_charts/multiple_gauge_charts_container.js ***! \**********************************************************************/ -/*! no exports provided */function(module,__webpack_exports__,__webpack_require__){"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _gauge_chart__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./gauge_chart */ "./src/multiple_gauge_charts/gauge_chart.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! styled-components */ "./node_modules/styled-components/dist/styled-components.browser.esm.js");\n/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../common */ "./src/common.js");\nfunction _templateObject2() {\n var data = _taggedTemplateLiteral(["\\n display: flex;\\n justify-content: center;\\n "]);\n\n _templateObject2 = function _templateObject2() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral(["\\n text-align: center;\\n font-family: \\"Open Sans\\", \\"Noto Sans JP\\", \\"Noto Sans\\", \\"Noto Sans CJK KR\\",\\n Helvetica, Arial, sans-serif;\\n display: grid;\\n grid-template-columns: repeat(\\n ", ",\\n minmax(50px, 400px)\\n );\\n grid-gap: 3rem;\\n "]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\n\n\n\n\n\nvar baseOptions = {\n columns: {\n type: "string",\n label: "Gauges per Row",\n "default": "2",\n section: "Style",\n order: 2\n },\n segments: {\n type: "string",\n label: "Gauge Segments",\n display: "select",\n values: [{\n 2: "2"\n }, {\n 3: "3"\n }, {\n 4: "4"\n }, {\n 5: "5"\n }, {\n 6: "6"\n }, {\n 7: "7"\n }, {\n 8: "8"\n }, {\n 9: "9"\n }, {\n 10: "10"\n }],\n "default": 3,\n section: "Style",\n order: 2\n },\n thickness: {\n type: "string",\n label: "Gauge Thickness",\n display: "select",\n values: [{\n "10": "10"\n }, {\n "20": "20"\n }, {\n "30": "30"\n }, {\n "40": "40"\n }, {\n "50": "50"\n }, {\n "60": "60"\n }, {\n "70": "70"\n }, {\n "80": "80"\n }, {\n "90": "90"\n }, {\n "100": "100"\n }],\n "default": "50",\n section: "Style",\n order: 3\n },\n font_size_title: {\n type: "string",\n label: "Title Font Size",\n "default": "2em",\n section: "Style",\n order: 7\n },\n font_size_target: {\n type: "string",\n label: "Target Font Size",\n "default": "16",\n section: "Style",\n order: 9\n },\n font_size_arc: {\n type: "string",\n label: "Arc Font Size",\n "default": "16",\n section: "Style",\n order: 8\n },\n font_size_main: {\n type: "string",\n label: "Value Font Size",\n "default": "5em",\n section: "Style",\n order: 9\n },\n target_display: {\n type: "boolean",\n label: "Display Target",\n values: [{\n Yes: true\n }, {\n No: false\n }],\n display: "radio",\n "default": true,\n section: "Style",\n order: 10\n },\n target_color: {\n type: "array",\n label: "Target Color",\n display: "color",\n "default": ["#6565ee"],\n section: "Style",\n order: 11\n },\n target_label: {\n type: "string",\n label: "Target Label",\n "default": "Target: ",\n section: "Values",\n order: 4\n },\n display_title: {\n type: "boolean",\n label: "Display Title",\n "default": true,\n section: "Values"\n },\n value_format: {\n type: "string",\n label: "Value Format",\n section: "Values",\n "default": "",\n placeholder: "#,##0.00"\n }\n};\nlooker.plugins.visualizations.add({\n // Id and Label are legacy properties that no longer have any function besides documenting\n // what the visualization used to have. The properties are now set via the manifest\n // form within the admin/visualizations page of Looker\n id: "multiple_gauge_chart",\n label: "Multiple Gauge Chart",\n options: baseOptions,\n // Set up the initial state of the visualization\n create: function create(element, config) {\n this.chart = react_dom__WEBPACK_IMPORTED_MODULE_2___default.a.render(react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", null, "...Loading"), element);\n },\n // Render in response to the data or settings changing\n updateAsync: function updateAsync(data, element, config, queryResponse, details, done) {\n // Clear any errors from previous updates\n if (queryResponse.fields.measures.length != 1) {\n this.addError({\n title: "Single measure only.",\n message: "This chart accepts one measure."\n });\n return;\n }\n\n if (!Object(_common__WEBPACK_IMPORTED_MODULE_4__["handleErrors"])(this, queryResponse, {\n min_pivots: 0,\n max_pivots: 0,\n min_dimensions: 1,\n max_dimensions: 1,\n min_measures: 1,\n max_measures: 1\n })) return;\n this.clearErrors();\n var MultipleGaugeGrid = styled_components__WEBPACK_IMPORTED_MODULE_3__["default"].div(_templateObject(), function (props) {\n return props.cols;\n });\n var rows = data.length / config.columns;\n var MultipleGaugeWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3__["default"].div(_templateObject2());\n var options = baseOptions;\n\n var dataPoints = function dataPoints(row) {\n return queryResponse.fields.measures.map(function (measure) {\n return {\n name: measure.name,\n label: measure.label_short,\n value: data[row][measure.name].value,\n valueFormat: config.value_format,\n formattedValue: data[row][measure.name].value\n };\n });\n };\n\n var dimensionsRows = function dimensionsRows(row) {\n return queryResponse.fields.dimensions.map(function (dimension) {\n return {\n name: dimension.name,\n label: dimension.label_short,\n value: data[row][dimension.name].value,\n valueFormat: dimension.value_format\n };\n });\n };\n\n data.map(function (row, index) {\n options["".concat(dimensionsRows(index)[0].value, "_color_range")] = {\n type: "array",\n label: "".concat(dimensionsRows(index)[0].value, " - Color Range"),\n display: "colors",\n "default": ["#6565ee", "#33a7ed"],\n section: "Style",\n order: 0\n };\n options["range_".concat(dimensionsRows(index)[0].value)] = {\n type: "array",\n label: "".concat(dimensionsRows(index)[0].value, " - Range Values"),\n display: "mimax_values",\n "default": [0, dimensionsRows(index)[0].value * 1.15],\n section: "Values"\n };\n options["".concat(dimensionsRows(index)[0].value, "_target_value")] = {\n type: "number",\n label: "".concat(dimensionsRows(index)[0].value, " Target Value"),\n "default": 0,\n section: "Values"\n };\n options["title_override_".concat(dimensionsRows(index)[0].value)] = {\n type: "string",\n label: "Override ".concat(dimensionsRows(index)[0].value, " Title"),\n section: "Values",\n "default": "".concat(dimensionsRows(index)[0].value),\n placeholder: "".concat(dimensionsRows(index)[0].value)\n };\n });\n this.trigger("registerOptions", options);\n console.log("Client Height: " + element.clientHeight);\n console.log("Client Width: " + element.clientWidth);\n console.log("Columns: " + config.columns);\n console.log("Rows: " + rows);\n console.log("datum W: " + element.clientWidth / config.columns);\n console.log("datum H: " + element.clientHeight / rows);\n var datumH = element.clientHeight / rows > 230 ? 235 : element.clientHeight / rows;\n var datumW = element.clientWidth / config.columns;\n\n var MultipleGaugeItems = function MultipleGaugeItems() {\n return react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MultipleGaugeWrapper, null, react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MultipleGaugeGrid, {\n cols: config.columns\n }, data.map(function (row, index) {\n var dimVal = dimensionsRows(index)[0].value;\n var formattedValue = Object(_common__WEBPACK_IMPORTED_MODULE_4__["formatType"])(config.value_format || dataPoints(index)[0].value_format)("".concat(dataPoints(index)[0].value));\n return react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_gauge_chart__WEBPACK_IMPORTED_MODULE_0__["default"], {\n containerHeight: datumH,\n width: datumW,\n height: datumH,\n target: config["".concat(dimVal, "_target_value")],\n config: config,\n key: index,\n data: dataPoints(index),\n colors: config["".concat(dimVal, "_color_range")],\n title_display: config.display_title,\n title: config["title_override_".concat(dimVal)],\n range: config["range_".concat(dimVal)] //needs variable value\n ,\n value_format: config.valueFormat,\n formatted_value: formattedValue,\n percentage: false\n }) // \n ;\n })));\n }; // Finally update the state with our new data\n\n\n this.chart = react_dom__WEBPACK_IMPORTED_MODULE_2___default.a.render(react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MultipleGaugeItems, null), element); // We are done rendering! Let Looker know.\n\n done();\n }\n});\n\n//# sourceURL=webpack://%5Bname%5D/./src/multiple_gauge_charts/multiple_gauge_charts_container.js?')}})}); \ No newline at end of file +/*! no exports provided */function(module,__webpack_exports__,__webpack_require__){"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _gauge_chart__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./gauge_chart */ "./src/multiple_gauge_charts/gauge_chart.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! styled-components */ "./node_modules/styled-components/dist/styled-components.browser.esm.js");\n/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../common */ "./src/common.js");\nfunction _templateObject2() {\n var data = _taggedTemplateLiteral(["\\n display: flex;\\n justify-content: center;\\n "]);\n\n _templateObject2 = function _templateObject2() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral(["\\n text-align: center;\\n font-family: \\"Open Sans\\", \\"Noto Sans JP\\", \\"Noto Sans\\", \\"Noto Sans CJK KR\\",\\n Helvetica, Arial, sans-serif;\\n display: grid;\\n grid-template-columns: repeat(\\n ", ",\\n minmax(50px, 400px)\\n );\\n grid-gap: 3rem;\\n "]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\n\n\n\n\n\nvar baseOptions = {\n columns: {\n type: "string",\n label: "Gauges per Row",\n "default": "2",\n section: "Style",\n order: 2\n },\n segments: {\n type: "string",\n label: "Gauge Segments",\n display: "select",\n values: [{\n 2: "2"\n }, {\n 3: "3"\n }, {\n 4: "4"\n }, {\n 5: "5"\n }, {\n 6: "6"\n }, {\n 7: "7"\n }, {\n 8: "8"\n }, {\n 9: "9"\n }, {\n 10: "10"\n }],\n "default": 3,\n section: "Style",\n order: 2\n },\n thickness: {\n type: "string",\n label: "Gauge Thickness",\n display: "select",\n values: [{\n "10": "10"\n }, {\n "20": "20"\n }, {\n "30": "30"\n }, {\n "40": "40"\n }, {\n "50": "50"\n }, {\n "60": "60"\n }, {\n "70": "70"\n }, {\n "80": "80"\n }, {\n "90": "90"\n }, {\n "100": "100"\n }],\n "default": "50",\n section: "Style",\n order: 3\n },\n font_size_title: {\n type: "string",\n label: "Title Font Size",\n "default": "2em",\n section: "Style",\n order: 7\n },\n font_size_target: {\n type: "string",\n label: "Target Font Size",\n "default": "16",\n section: "Style",\n order: 9\n },\n font_size_arc: {\n type: "string",\n label: "Arc Font Size",\n "default": "16",\n section: "Style",\n order: 8\n },\n font_size_main: {\n type: "string",\n label: "Value Font Size",\n "default": "5em",\n section: "Style",\n order: 9\n },\n target_display: {\n type: "boolean",\n label: "Display Target",\n values: [{\n Yes: true\n }, {\n No: false\n }],\n display: "radio",\n "default": true,\n section: "Style",\n order: 10\n },\n target_color: {\n type: "array",\n label: "Target Color",\n display: "color",\n "default": ["#6565ee"],\n section: "Style",\n order: 11\n },\n target_label: {\n type: "string",\n label: "Target Label",\n "default": "Target: ",\n section: "Values",\n order: 4\n },\n display_title: {\n type: "boolean",\n label: "Display Title",\n "default": true,\n section: "Values"\n },\n value_format: {\n type: "string",\n label: "Value Format",\n section: "Values",\n "default": "",\n placeholder: "#,##0.00"\n }\n};\nlooker.plugins.visualizations.add({\n // Id and Label are legacy properties that no longer have any function besides documenting\n // what the visualization used to have. The properties are now set via the manifest\n // form within the admin/visualizations page of Looker\n id: "multiple_gauge_chart",\n label: "Multiple Gauge Chart",\n options: baseOptions,\n // Set up the initial state of the visualization\n create: function create(element, config) {\n this.chart = react_dom__WEBPACK_IMPORTED_MODULE_2___default.a.render(react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", null), element);\n },\n // Render in response to the data or settings changing\n updateAsync: function updateAsync(data, element, config, queryResponse, details, done) {\n // Clear any errors from previous updates\n if (queryResponse.fields.measures.length != 1) {\n this.addError({\n title: "Single measure only.",\n message: "This chart accepts one measure."\n });\n return;\n }\n\n if (!Object(_common__WEBPACK_IMPORTED_MODULE_4__["handleErrors"])(this, queryResponse, {\n min_pivots: 0,\n max_pivots: 0,\n min_dimensions: 1,\n max_dimensions: 1,\n min_measures: 1,\n max_measures: 1\n })) return;\n this.clearErrors();\n var MultipleGaugeGrid = styled_components__WEBPACK_IMPORTED_MODULE_3__["default"].div(_templateObject(), function (props) {\n return props.cols;\n });\n var rows = data.length / config.columns;\n var MultipleGaugeWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3__["default"].div(_templateObject2());\n var options = baseOptions;\n\n var dataPoints = function dataPoints(row) {\n return queryResponse.fields.measures.map(function (measure) {\n return {\n name: measure.name,\n label: measure.label_short,\n value: data[row][measure.name].value,\n valueFormat: config.value_format,\n formattedValue: data[row][measure.name].value\n };\n });\n };\n\n var dimensionsRows = function dimensionsRows(row) {\n return queryResponse.fields.dimensions.map(function (dimension) {\n return {\n name: dimension.name,\n label: dimension.label_short,\n value: data[row][dimension.name].value,\n valueFormat: dimension.value_format\n };\n });\n };\n\n data.map(function (row, index) {\n options["".concat(dimensionsRows(index)[0].value, "_color_range")] = {\n type: "array",\n label: "".concat(dimensionsRows(index)[0].value, " - Color Range"),\n display: "colors",\n "default": ["#6565ee", "#33a7ed"],\n section: "Style",\n order: 0\n };\n options["range_".concat(dimensionsRows(index)[0].value)] = {\n type: "array",\n label: "".concat(dimensionsRows(index)[0].value, " - Range Values"),\n display: "mimax_values",\n "default": [0, dimensionsRows(index)[0].value * 1.15],\n section: "Values"\n };\n options["".concat(dimensionsRows(index)[0].value, "_target_value")] = {\n type: "number",\n label: "".concat(dimensionsRows(index)[0].value, " Target Value"),\n "default": 0,\n section: "Values"\n };\n options["title_override_".concat(dimensionsRows(index)[0].value)] = {\n type: "string",\n label: "Override ".concat(dimensionsRows(index)[0].value, " Title"),\n section: "Values",\n "default": "".concat(dimensionsRows(index)[0].value),\n placeholder: "".concat(dimensionsRows(index)[0].value)\n };\n });\n this.trigger("registerOptions", options); // console.log("Client Height: " + element.clientHeight);\n // console.log("Client Width: " + element.clientWidth);\n // console.log("Columns: " + config.columns);\n // console.log("Rows: " + rows);\n // console.log("datum W: " + (element.clientWidth / config.columns));\n // console.log("datum H: " + (element.clientHeight / rows));\n\n var datumH = element.clientHeight / rows > 230 ? 235 : element.clientHeight / rows;\n var datumW = element.clientWidth / config.columns;\n\n var MultipleGaugeItems = function MultipleGaugeItems() {\n return react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MultipleGaugeWrapper, null, react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MultipleGaugeGrid, {\n cols: config.columns\n }, data.map(function (row, index) {\n var dimVal = dimensionsRows(index)[0].value;\n var formattedValue = Object(_common__WEBPACK_IMPORTED_MODULE_4__["formatType"])(config.value_format || dataPoints(index)[0].value_format)("".concat(dataPoints(index)[0].value));\n return react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_gauge_chart__WEBPACK_IMPORTED_MODULE_0__["default"], {\n containerHeight: datumH,\n width: datumW,\n height: datumH,\n target: config["".concat(dimVal, "_target_value")],\n config: config,\n key: index,\n data: dataPoints(index),\n colors: config["".concat(dimVal, "_color_range")],\n title_display: config.display_title,\n title: config["title_override_".concat(dimVal)],\n range: config["range_".concat(dimVal)] //needs variable value\n ,\n value_format: config.valueFormat,\n formatted_value: formattedValue,\n percentage: false\n }) // \n ;\n })));\n }; // Finally update the state with our new data\n\n\n this.chart = react_dom__WEBPACK_IMPORTED_MODULE_2___default.a.render(react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(MultipleGaugeItems, null), element); // We are done rendering! Let Looker know.\n\n done();\n }\n});\n\n//# sourceURL=webpack://%5Bname%5D/./src/multiple_gauge_charts/multiple_gauge_charts_container.js?')}})}); \ No newline at end of file