Sunburst

slanatech · Aug 28, 2020 · 850fa9b · 850fa9b
1 parent 2a7bc23
commit 850fa9b
Show file tree

Hide file tree

Showing 4 changed files with 395 additions and 2 deletions.
diff --git a/src/components/d3/DbSunburst.vue b/src/components/d3/DbSunburst.vue
@@ -182,6 +182,7 @@ export default {
         .attr('transform', d => labelTransform(d))
         .attr('fill-opacity', d => +labelVisible(d))
         .attr('dy', '0.35em')
+        .attr('class','db-sunburst-label')
         .attr('clip-path', function(d, i) {
           return 'url(#cp-' + i + ')';
         })
@@ -282,10 +283,20 @@ export default {
   }
 };
 </script>
-<style>
+<style lang="scss">
 .db-sunburst {
   width: 100%;
   height: 100%;
   display: block;
+  .db-sunburst-label {
+    font-size: 16px;
+    font-family: 'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  }
+}
+
+.db-dark {
+  .db-sunburst-label {
+    fill: #bdbdbd;
+  }
 }
 </style>
diff --git a/src/demo/layouts/Default.vue b/src/demo/layouts/Default.vue
@@ -122,7 +122,8 @@ export default {
             { title: 'Dynamic Timelines', link: '/dynamictimelines', icon: 'schedule' },
             { title: 'Dynamic Timelines Dygraphs', link: '/dynamictimelinesdygraphs', icon: 'schedule' },
             { title: 'Dynamic Sales Dashboard', link: '/dynamicsalesdashboard', icon: 'schedule' },
-            { title: 'Sales Funnel Dashboard', link: '/salesfunnel', icon: 'filter_alt' }
+            { title: 'Sales Funnel Dashboard', link: '/salesfunnel', icon: 'filter_alt' },
+            { title: 'Sales Sunburst Dashboard', link: '/salessunburst', icon: 'camera' }
           ]
         },
         {