Skip to content

Commit

Permalink
Compile network-tariff-card.ts to JS and add to dist
Browse files Browse the repository at this point in the history
  • Loading branch information
@frlequ
frlequ committed Oct 12, 2024
1 parent 166a2a4 commit df04ec1
Showing 1 changed file with 105 additions and 77 deletions.
182 changes: 105 additions & 77 deletions dist/network-tariff-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ var __extends = (this && this.__extends) || (function () {
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
Expand All @@ -25,102 +29,126 @@ var __assign = (this && this.__assign) || function () {
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var lit_element_js_module_1 = require("https://unpkg.com/[email protected]/lit-element.js?module");
var NetworkTariffCard = /** @class */ (function (_super) {
__extends(NetworkTariffCard, _super);
function NetworkTariffCard() {
return _super !== null && _super.apply(this, arguments) || this;
var _this = _super !== null && _super.apply(this, arguments) || this;
// Declare variables globally
_this.entity = null;
_this.blocksArray = [];
_this.defaultColorMap = {
1: '#03045e',
2: '#0077b6',
3: '#00b4d8',
4: '#90e0ef',
5: '#caf0f8'
};
_this.colorMap = null;
return _this;
}
Object.defineProperty(NetworkTariffCard, "properties", {
get: function () {
return {
hass: { type: Object },
config: { type: Object },
};
},
enumerable: false,
configurable: true
});
NetworkTariffCard.prototype.setConfig = function (config) {
if (!config.entity) {
throw new Error('You need to define an entity');
}
// Set the default hole size if not provided
this.config = __assign({ showHours: (function () {
if (config.showHours !== undefined) { // Check if showHours is present
if (typeof config.showHours === 'boolean') {
return config.showHours; // Return the valid boolean value
}
else {
throw new Error("Invalid value for showHours: ".concat(config.showHours, ". It must be a boolean."));
throw new Error("Invalid value for showHours: ".concat(config.showHours, ". It must be a boolean. True or False."));
}
}
return true; // Default to true if showHours is not present
})(), outerRadius: config.outerRadius || 40, innerRadius: config.innerRadius || 32, colorMap: __assign({}, config.colorMap // User-defined colors will overwrite defaults
})(), offsetHours: (function () {
if (config.offsetHours !== undefined) { // Check if offsetHours is present
if (typeof config.offsetHours === 'boolean') {
return config.offsetHours; // Return the valid boolean value
}
else {
throw new Error("Invalid value for offsetHours: ".concat(config.offsetHours, ". It must be a boolean. True or False."));
}
}
return false; // Default to true if offsetHours is not present
})(), outerRadius: config.outerRadius || 40, innerRadius: config.innerRadius || 32, name: config.name || '', colorMap: __assign({}, config.colorMap // User-defined colors will overwrite defaults
) }, config);
this.attachShadow({ mode: 'open' });
//this.attachShadow({ mode: 'open' });
};
Object.defineProperty(NetworkTariffCard.prototype, "hass", {
set: function (hass) {
var _this = this;
var entity = hass.states[this.config.entity];
var state = entity ? entity.state : 'Unavailable';
// Retrieve blocks from entity attributes and handle cases where it's not defined
var blocks = entity.attributes.blocks || Array(24).fill(1); // Default to 24 hours with value 1 if blocks are not present
var blocksArray = Array.isArray(blocks) ? blocks : blocks.split(',').map(Number); // Support both array and comma-separated string
// Get current hour
var now = new Date();
var currentHour = now.getHours();
if (!this.shadowRoot)
return;
// Use user-defined colorMap or default to predefined colors
var colorMap = this.config.colorMap;
// Helper function to create each segment as a donut slice for a 24-hour clock
var createSegment = function (i, totalSegments, outerRadius, innerRadius, strokeColor, strokeWidth, textColor) {
if (showHours !== true) {
outerRadius = outerRadius + 5;
innerRadius = innerRadius + 5;
}
var angle = (2 * Math.PI) / totalSegments; // Angle per segment
// Calculate coordinates for the outer arc
var x1 = 50 + outerRadius * Math.cos(i * angle - Math.PI / 2);
var y1 = 50 + outerRadius * Math.sin(i * angle - Math.PI / 2);
var x2 = 50 + outerRadius * Math.cos((i + 1) * angle - Math.PI / 2);
var y2 = 50 + outerRadius * Math.sin((i + 1) * angle - Math.PI / 2);
// Calculate coordinates for the inner arc (the hole)
var x3 = 50 + innerRadius * Math.cos((i + 1) * angle - Math.PI / 2);
var y3 = 50 + innerRadius * Math.sin((i + 1) * angle - Math.PI / 2);
var x4 = 50 + innerRadius * Math.cos(i * angle - Math.PI / 2);
var y4 = 50 + innerRadius * Math.sin(i * angle - Math.PI / 2);
// Get color based on the value for this hour (use user-defined color map or default to predefined colors)
var segmentValue = blocksArray[i];
var defaultColorMap = {
1: '#03045e',
2: '#0077b6',
3: '#00b4d8',
4: '#90e0ef',
5: '#caf0f8'
};
// Determine the segment color
var segmentColor = (colorMap[segmentValue] !== undefined ? colorMap[segmentValue] : defaultColorMap[segmentValue]) || '#000'; // Default to black if no match
// Calculate the position for the number label
var labelRadius = outerRadius + 5; // Slightly outside the outer radius
var labelX = 50 + labelRadius * Math.cos((i + 0.5) * angle - Math.PI / 2);
var labelY = 50 + labelRadius * Math.sin((i + 0.5) * angle - Math.PI / 2);
// Create the donut segment path and number label
return "\n\t\t<path\n\t\t d=\"M".concat(x1, ",").concat(y1, " A").concat(outerRadius, ",").concat(outerRadius, " 0 0,1 ").concat(x2, ",").concat(y2, " \n\t\t\t L").concat(x3, ",").concat(y3, " A").concat(innerRadius, ",").concat(innerRadius, " 0 0,0 ").concat(x4, ",").concat(y4, " Z\"\n\t\t fill=\"").concat(segmentColor, "\" \n\t\t stroke=\"").concat(strokeColor, "\" stroke-width=\"").concat(strokeWidth, "\"\n\t\t/>\n\t\t").concat(showHours ? "<text x=\"".concat(labelX, "\" y=\"").concat(labelY, "\" fill=\"").concat(textColor, "\" font-size=\"5\" text-anchor=\"middle\" alignment-baseline=\"middle\">").concat(i + 1, "</text>") : '', "\n\t ");
};
// Generate the 24 segments for the donut clock
var totalSegments = 24;
var showHours = this.config.showHours;
var outerRadius = this.config.outerRadius; // Customizable inner radius (hole size)
var innerRadius = this.config.innerRadius; // Customizable inner radius (hole size)
var strokeColor = "rgba(0, 0, 0, 1)"; // Line separating each segment
var strokeWidth = 0.3;
var textColor = "rgba(150, 150, 150, 1)";
var segments = Array.from({ length: totalSegments }, function (_, i) {
return createSegment.call(_this, i, totalSegments, outerRadius, innerRadius, strokeColor, strokeWidth, textColor);
}).join('');
// Create current hour section
var currentHourSegment = createSegment.call(this, currentHour, totalSegments, innerRadius - 1, innerRadius - 5, 'black', 0.3, 'rgba(0, 0, 0, 0)');
// Update the shadow DOM with the correct SVG for the donut clock
this.shadowRoot.innerHTML = "\n<style>\n .tariffcard {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 20px;\n\n background-color: var(--ha-card-background, var(--card-background-color, #fff));\n color: var(--primary-text-color, black);\n border-radius: var(--ha-card-border-radius, 12px);\n box-shadow: var(--ha-card-box-shadow, none);\n position: relative;\n overflow: hidden; /* Prevent overflow */\n width: calc(100% - 40px); /* Subtract left + right padding (20px each) */\n height: calc(100% - 40px); /* Subtract top + bottom padding */\n }\n\n .circle-container {\n position: relative;\n width: 100%; /* Let it be responsive to the parent's width */\n height: 100%; /* Responsive to height */\n max-width: min(100vw, 100vh); /* Ensure it fits within the smallest viewport dimension */\n max-height: min(100vw, 100vh); /* Use the smallest dimension to avoid overflow */\n margin: 0 auto; /* Center horizontally */\n }\n\n .circle-clock {\n width: 100%;\n height: 100%;\n display: block;\n }\n\n .state {\n font-size: 48px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 1;\n }\n\n .name {\n font-size: 12px;\n margin-bottom: 10px;\n position: absolute;\n top: calc(50% - 25px);\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 1;\n }\n }\n</style>\n\n<div class=\"tariffcard\">\n <div class=\"name\">".concat(this.config.name || 'Entity', "</div>\n <div class=\"circle-container\">\n <div class=\"state\">").concat(state, "</div>\n <svg class=\"circle-clock\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid meet\">\n ").concat(segments, "\n ").concat(currentHourSegment, " <!-- Add the current hour segment here -->\n </svg>\n </div>\n</div>\n\n\n ");
},
enumerable: false,
configurable: true
});
NetworkTariffCard.prototype.getCardSize = function () {
return 1;
// The createSegment function now calculates each path segment of the donut chart
NetworkTariffCard.prototype.createSegment = function (i, totalSegments, outerRadius, innerRadius, strokeColor, strokeWidth, textColor, offsetHours, showHours) {
var angle = (2 * Math.PI) / totalSegments; // Angle per segment
var offset = showHours ? 0 : 5;
var offsetAngle = offsetHours ? 0.132 : 0;
// Calculate coordinates for the outer arc
var x1 = 50 + (outerRadius + offset) * Math.cos(i * angle - Math.PI / 2);
var y1 = 50 + (outerRadius + offset) * Math.sin(i * angle - Math.PI / 2);
var x2 = 50 + (outerRadius + offset) * Math.cos((i + 1) * angle - Math.PI / 2);
var y2 = 50 + (outerRadius + offset) * Math.sin((i + 1) * angle - Math.PI / 2);
// Calculate coordinates for the inner arc (the hole)
var x3 = 50 + (innerRadius + offset) * Math.cos((i + 1) * angle - Math.PI / 2);
var y3 = 50 + (innerRadius + offset) * Math.sin((i + 1) * angle - Math.PI / 2);
var x4 = 50 + (innerRadius + offset) * Math.cos(i * angle - Math.PI / 2);
var y4 = 50 + (innerRadius + offset) * Math.sin(i * angle - Math.PI / 2);
var segmentValue = this.blocksArray[i];
// Determine the segment color
var segmentColor = (this.colorMap[segmentValue] !== undefined ? this.colorMap[segmentValue] : this.defaultColorMap[segmentValue]) || '#000'; // Default to black if no match
// Calculate the position for the number label
var labelRadius = outerRadius + 5; // Slightly outside the outer radius
var labelX = 50 + labelRadius * Math.cos((i + 0.5) * angle - Math.PI / 2 + offsetAngle);
var labelY = 50 + labelRadius * Math.sin((i + 0.5) * angle - Math.PI / 2 + offsetAngle);
// Create the donut segment path and number label
return "\n\t\t <path\n\t\t\td=\"M".concat(x1, ",").concat(y1, " A").concat(outerRadius, ",").concat(outerRadius, " 0 0,1 ").concat(x2, ",").concat(y2, " \n\t\t\t L").concat(x3, ",").concat(y3, " A").concat(innerRadius, ",").concat(innerRadius, " 0 0,0 ").concat(x4, ",").concat(y4, " Z\"\n\t\t\tfill=\"").concat(segmentColor, "\" \n\t\t\tstroke=\"").concat(strokeColor, "\" stroke-width=\"").concat(strokeWidth, "\"\n\t\t />\n\t\t ").concat(showHours ? "<text x=\"".concat(labelX, "\" y=\"").concat(labelY, "\" fill=\"").concat(textColor, "\" font-size=\"5\" text-anchor=\"middle\" alignment-baseline=\"middle\">").concat(i + 1, "</text>") : '', "\n\t\t");
};
NetworkTariffCard.prototype.firstUpdated = function () {
var _this = this;
var svg = this.shadowRoot.querySelector(".circle-clock");
// Access the entity from Home Assistant's hass object
this.entity = this.hass.states[this.config.entity];
if (!this.entity)
return; // Exit if the entity is not available
var state = this.entity ? this.entity.state : 'Unavailable';
this.blocks = this.entity.attributes.blocks || Array(24).fill(1);
this.blocksArray = Array.isArray(this.blocks) ? this.blocks : this.blocks.split(',').map(Number);
var now = new Date();
var currentHour = now.getHours();
//const colorMap = this.config.colorMap;
this.colorMap = this.config.colorMap;
var totalSegments = 24;
var outerRadius = this.config.outerRadius !== undefined ? this.config.outerRadius : 40;
var innerRadius = this.config.innerRadius !== undefined ? this.config.innerRadius : 32;
var offsetHours = this.config.offsetHours !== undefined ? this.config.offsetHours : false;
var showHours = this.config.showHours !== undefined ? this.config.showHours : true;
var strokeColor = "rgba(0, 0, 0, 1)"; // Line separating each segment
var strokeWidth = 0.3;
var textColor = "rgba(150, 150, 150, 1)";
// Create daily blocks
var segments = Array.from({ length: totalSegments }, function (_, i) {
return _this.createSegment(i, totalSegments, outerRadius, innerRadius, strokeColor, strokeWidth, textColor, offsetHours, showHours);
}).join('');
// Create current hour section
var currentHourSegment = this.createSegment(currentHour, totalSegments, innerRadius - 1, innerRadius - 5, 'black', 0.3, 'rgba(0, 0, 0, 0)', offsetHours, showHours);
// Render out
svg.innerHTML = segments + currentHourSegment;
};
NetworkTariffCard.prototype.render = function () {
var entity = this.hass.states[this.config.entity];
var state = entity ? entity.state : 'Unavailable';
return (0, lit_element_js_module_1.html)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t <ha-card>\n\t\t\t<div class=\"tariffcard\">\n\t\t\t <div class=\"name\">", "</div>\n\t\t\t <div class=\"circle-container\">\n\t\t\t\t<div class=\"state\">", "</div>\n\t\t\t\t<svg class=\"circle-clock\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid meet\"></svg>\n\t\t\t </div>\n\t\t\t</div>\n\t\t </ha-card>\n\t\t"], ["\n\t\t <ha-card>\n\t\t\t<div class=\"tariffcard\">\n\t\t\t <div class=\"name\">", "</div>\n\t\t\t <div class=\"circle-container\">\n\t\t\t\t<div class=\"state\">", "</div>\n\t\t\t\t<svg class=\"circle-clock\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid meet\"></svg>\n\t\t\t </div>\n\t\t\t</div>\n\t\t </ha-card>\n\t\t"])), this.config.name || 'Entity', state);
};
NetworkTariffCard.styles = (0, lit_element_js_module_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t.tariffcard {\n\t\t display: flex;\n\t\t justify-content: center;\n\t\t align-items: center;\n\t\t text-align: center;\n\t\t padding: 20px;\n\t\t \n\t\t color: var(--tariff-card-text-color, var(--primary-text-color, black));\n\t\t border-radius: var(--tariff-card-border-radius, var(--ha-card-border-radius, 12px));\n\t\t box-shadow: var(--ha-card-box-shadow, none);\n\t\t position: relative;\n\t\t overflow: hidden;\n\t\t width: calc(100% - 40px);\n\t\t height: calc(100% - 40px);\n\t\t}\n\n\t\t.circle-container {\n\t\t position: relative;\n\t\t width: 100%;\n\t\t height: 100%;\n\t\t max-width: min(100vw, 100vh);\n\t\t max-height: min(100vw, 100vh);\n\t\t margin: 0 auto;\n\t\t}\n\n\t\t.circle-clock {\n\t\t width: 100%;\n\t\t height: 100%;\n\t\t display: block;\n\t\t \n\t\t}\n\n\t\t.state {\n\t\t font-size: var(--tariff-card-state-font-size, 48px);\n\t\t position: absolute;\n\t\t top: 50%;\n\t\t left: 50%;\n\t\t transform: translate(-50%, -50%);\n\t\t z-index: 1;\n\t\t}\n\n\t\t.name {\n\t\t font-size: var(--tariff-card-name-font-size, 12px);\n\t\t position: absolute;\n\t\t top: calc(50% - 25px);\n\t\t left: 50%;\n\t\t transform: translate(-50%, -50%);\n\t\t z-index: 1;\n\t\t}\n\t "], ["\n\t\t.tariffcard {\n\t\t display: flex;\n\t\t justify-content: center;\n\t\t align-items: center;\n\t\t text-align: center;\n\t\t padding: 20px;\n\t\t \n\t\t color: var(--tariff-card-text-color, var(--primary-text-color, black));\n\t\t border-radius: var(--tariff-card-border-radius, var(--ha-card-border-radius, 12px));\n\t\t box-shadow: var(--ha-card-box-shadow, none);\n\t\t position: relative;\n\t\t overflow: hidden;\n\t\t width: calc(100% - 40px);\n\t\t height: calc(100% - 40px);\n\t\t}\n\n\t\t.circle-container {\n\t\t position: relative;\n\t\t width: 100%;\n\t\t height: 100%;\n\t\t max-width: min(100vw, 100vh);\n\t\t max-height: min(100vw, 100vh);\n\t\t margin: 0 auto;\n\t\t}\n\n\t\t.circle-clock {\n\t\t width: 100%;\n\t\t height: 100%;\n\t\t display: block;\n\t\t \n\t\t}\n\n\t\t.state {\n\t\t font-size: var(--tariff-card-state-font-size, 48px);\n\t\t position: absolute;\n\t\t top: 50%;\n\t\t left: 50%;\n\t\t transform: translate(-50%, -50%);\n\t\t z-index: 1;\n\t\t}\n\n\t\t.name {\n\t\t font-size: var(--tariff-card-name-font-size, 12px);\n\t\t position: absolute;\n\t\t top: calc(50% - 25px);\n\t\t left: 50%;\n\t\t transform: translate(-50%, -50%);\n\t\t z-index: 1;\n\t\t}\n\t "])));
return NetworkTariffCard;
}(HTMLElement));
}(lit_element_js_module_1.LitElement));
customElements.define('network-tariff-card', NetworkTariffCard);
var templateObject_1, templateObject_2;

0 comments on commit df04ec1

Please sign in to comment.