mdt-charts 1.12.14 → 1.12.17

package/lib/style/charts-main.less

@@ -30,12 +30,12 @@
 
 
 /*========================================================================== Common classes */
-.charts-opacity-inactive {
+.mdt-charts-opacity-inactive {
     opacity: 0.6;
 }
 
 /* EXTENDED FOR SPECIFIC STYLES */
-.legend-item.charts-opacity-inactive {
+.legend-item.mdt-charts-opacity-inactive {
     opacity: 0.45;
 }
 
@@ -109,14 +109,14 @@
 
 
 /*========================================================================= Tooltip */
-.tooltip-block {
+.mdt-charts-tooltip-block {
     pointer-events: none;
     z-index: 100;
     filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.1));
     width: max-content;
     max-width: 500px;
 }
-.tooltip-content {
+.mdt-charts-tooltip-content {
     position: relative;
     pointer-events: none;
     font-family: "Roboto", sans-serif;
@@ -128,7 +128,7 @@
     background: rgba(0, 0, 0, 0.82);
     font-size: 11px;
 }
-.tooltip-arrow {
+.mdt-charts-tooltip-arrow {
     width: 0;
     height: 0;
     border-style: solid;
@@ -159,26 +159,26 @@
     font-weight: 400;
 }
 
-.tooltip-line {
+.mdt-charts-tooltip-line {
     stroke: #AAA;
     stroke-width: 1px;
     stroke-linecap: round;
 }
-.tooltip-content .tooltip-head {
+.mdt-charts-tooltip-content .tooltip-head {
     font-size: 12px;
     margin-bottom: 10px;
 }
-.tooltip-content .tooltip-texts {
+.mdt-charts-tooltip-content .tooltip-texts {
     width: 100%;
 }
 
-.tooltip-content .tooltip-text-item > span {
+.mdt-charts-tooltip-content .tooltip-text-item > span {
     display: block;
 }
-.tooltip-content .tooltip-text-item > span:first-of-type {
+.mdt-charts-tooltip-content .tooltip-text-item > span:first-of-type {
     flex: 1;
 }
-.tooltip-content .tooltip-text-item > span:last-of-type {
+.mdt-charts-tooltip-content .tooltip-text-item > span:last-of-type {
     flex: 0;
 }
 .tooltip-field-value {
@@ -188,10 +188,10 @@
 
 
 /*========================================================================= Additional */
-.charts-axis .domain {
+.mdt-charts-axis .domain {
     stroke: #D2D2D2;
 }
-.charts-axis .tick line:first-of-type {
+.mdt-charts-axis .tick line:first-of-type {
     stroke: #D2D2D2;
 }
 
@@ -261,6 +261,76 @@
 }
 
 /* Mark dots */
-.charts-dot-hidden {
+.mdt-charts-dot-hidden {
     display: none;
+}
+
+/* Card */
+.mdt-charts-html-chart {
+    width: 100%;
+    height: 100%;
+}
+
+.mdt-charts-card-wrapper {
+    width: 100%;
+    height: 100%;
+}
+
+.mdt-charts-card-wrapper * {
+    box-sizing: border-box;
+}
+
+.mdt-charts-card-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.mdt-charts-card-header {
+    display: flex;
+    justify-content: space-between;
+    flex: 1;
+    font-size: 1.3em;
+}
+
+.mdt-charts-card-title {
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mdt-charts-card-description-wrapper {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mdt-charts-card-description {
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    opacity: 0.6;
+}
+
+.mdt-charts-card-value-wrapper {
+    flex: 2;
+    display: flex;
+    align-items: center;
+}
+
+.mdt-charts-card-change-content {
+    display: flex;
+    font-size: 0.9em;
+}
+
+.mdt-charts-card-change-content-item:not(:last-of-type) {
+    margin-right: 0.5em;
+}
+
+.mdt-charts-card-change-description-wrapper {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdt-charts",
-  "version": "1.12.14",
+  "version": "1.12.17",
   "description": "",
   "main": "lib/main.js",
   "scripts": {