Add badges list visualization

openHPI · Sep 12, 2019 · b4d59b5 · b4d59b5
1 parent 5b1d40d
commit b4d59b5
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 0 deletions.
diff --git a/demo/visualizations/badges_list_demo.html b/demo/visualizations/badges_list_demo.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>badges-list demo</title>
+
+    <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../../src/visualizations/badges-list.html">
+
+    <style is="custom-style" include="demo-pages-shared-styles">
+        div.vertical-section-container {
+            max-width: 1500px;
+        }
+    </style>
+  </head>
+
+<body>
+    <div>
+        <h3>badges-list demo (custom element)</h3>
+        <demo-snippet>
+            <template>
+              <div>
+                <badges-list data='[{"title": "foo", "value": 76235}, {"title": "bar", "value": 24}, {"title": "baz", "value": 5243}]'></badges-list>
+              </div>
+            </template>
+        </demo-snippet>
+    </div>
+</body>
+
+</html>
diff --git a/src/all-imports.html b/src/all-imports.html
@@ -17,3 +17,4 @@
 <link rel="import" href="visualizations/vennchart-basic.html">
 <link rel="import" href="visualizations/boxplot-basic.html">
 <link rel="import" href="visualizations/fallback-text.html">
+<link rel="import" href="visualizations/badges-list.html">
diff --git a/src/visualizations/badges-list.html b/src/visualizations/badges-list.html
@@ -0,0 +1,72 @@
+<link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../behaviors/data-receiver-behavior.html">
+
+
+<!--
+`badges-list`
+<br />This is a component for a list of counter badges.
+
+@demo demo/visualizations/badges_list_demo.html
+-->
+<dom-module id="badges-list">
+    <template>
+        <style>
+            :host {
+                display: block;
+             }
+
+            .badge {
+                background-color: #000;
+                color: #fff;
+                display: inline-block;
+                padding-left: 8px;
+                padding-right: 8px;
+                text-align: center;
+                border-radius: 10px;
+                margin-right: 8px;
+                margin-top: 2px;
+                margin-bottom: 2px;
+            }
+
+            .badge-cell {
+                text-align: right;
+            }
+        </style>
+        <template is="dom-if" if="[[hasReceivedData]]">
+            <table>
+                <template is="dom-repeat" items="[[data]]">
+                    <tr>
+                        <td class='badge-cell'><div class='badge'>[[item.value]]</div></td>
+                        <td class='badge-title-cell'><div class='badge-title'>[[item.title]]</div></td>
+                    </tr>
+                </template>
+            </table>
+        </template>
+        <template is="dom-if" if="[[_showSpinner]]">
+            <i id="spinner" class="fa fas fa-spinner fa-spin"></i>
+        </template>
+    </template>
+
+    <script>
+        window.addEventListener("WebComponentsReady", function() {
+            Polymer({
+                is: 'badges-list',
+                behaviors: [DataReceiverBehavior],
+                properties: {
+                    /** Determines whether the loading spinner should be hidden. */
+                    hideSpinner: {
+                        type: Boolean,
+                        value: false,
+                    },
+                    _showSpinner: {
+                        type: Boolean,
+                        computed: '_computeShowSpinner(hideSpinner, hasReceivedData)',
+                    },
+                },
+                _computeShowSpinner: function(hideSpinner, hasReceivedData) {
+                    return !hideSpinner && !hasReceivedData;
+                },
+            });
+        });
+    </script>
+</dom-module>