From 20eef6a78aff8dc0907b8dcf7b43659f23ab57a1 Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Mon, 16 Aug 2021 10:59:11 -0700 Subject: [PATCH 01/48] creates bar chart component --- ui/lib/core/addon/components/bar-chart.js | 20 ++ .../addon/templates/components/bar-chart.hbs | 3 + ui/lib/core/app/components/bar-chart.js | 1 + ui/lib/core/stories/bar-chart.md | 25 ++ ui/lib/core/stories/bar-chart.stories.js | 14 ++ ui/package.json | 1 + .../integration/components/bar-chart-test.js | 26 +++ ui/yarn.lock | 216 +++++++++++++++++- 8 files changed, 296 insertions(+), 10 deletions(-) create mode 100644 ui/lib/core/addon/components/bar-chart.js create mode 100644 ui/lib/core/addon/templates/components/bar-chart.hbs create mode 100644 ui/lib/core/app/components/bar-chart.js create mode 100644 ui/lib/core/stories/bar-chart.md create mode 100644 ui/lib/core/stories/bar-chart.stories.js create mode 100644 ui/tests/integration/components/bar-chart-test.js diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js new file mode 100644 index 0000000000000..4f2fdcd975e40 --- /dev/null +++ b/ui/lib/core/addon/components/bar-chart.js @@ -0,0 +1,20 @@ +/** + * @module BarChart + * BarChart components are used to... + * + * @example + * ```js + * + * ``` + * @param {object} requiredParam - requiredParam is... + * @param {string} [optionalParam] - optionalParam is... + * @param {string} [param1=defaultValue] - param1 is... + */ + +import Component from '@glimmer/component'; +import layout from '../templates/components/bar-chart'; +import { setComponentTemplate } from '@ember/component'; + +class BarChart extends Component {} + +export default setComponentTemplate(layout, BarChart); diff --git a/ui/lib/core/addon/templates/components/bar-chart.hbs b/ui/lib/core/addon/templates/components/bar-chart.hbs new file mode 100644 index 0000000000000..90cc1201575cf --- /dev/null +++ b/ui/lib/core/addon/templates/components/bar-chart.hbs @@ -0,0 +1,3 @@ +One day I'll be a real nice bar chart + + \ No newline at end of file diff --git a/ui/lib/core/app/components/bar-chart.js b/ui/lib/core/app/components/bar-chart.js new file mode 100644 index 0000000000000..085613131bf0b --- /dev/null +++ b/ui/lib/core/app/components/bar-chart.js @@ -0,0 +1 @@ +export { default } from 'core/components/bar-chart'; diff --git a/ui/lib/core/stories/bar-chart.md b/ui/lib/core/stories/bar-chart.md new file mode 100644 index 0000000000000..2a2b8389426e7 --- /dev/null +++ b/ui/lib/core/stories/bar-chart.md @@ -0,0 +1,25 @@ + + +## BarChart +BarChart components are used to... + +**Params** + +| Param | Type | Default | Description | +| --- | --- | --- | --- | +| requiredParam | object | | requiredParam is... | +| [optionalParam] | string | | optionalParam is... | +| [param1] | string | "defaultValue" | param1 is... | + +**Example** + +```js + +``` + +**See** + +- [Uses of BarChart](https://github.com/hashicorp/vault/search?l=Handlebars&q=BarChart+OR+bar-chart) +- [BarChart Source Code](https://github.com/hashicorp/vault/blob/master/ui/lib/core/addon/components/bar-chart.js) + +--- diff --git a/ui/lib/core/stories/bar-chart.stories.js b/ui/lib/core/stories/bar-chart.stories.js new file mode 100644 index 0000000000000..700e350f2ae93 --- /dev/null +++ b/ui/lib/core/stories/bar-chart.stories.js @@ -0,0 +1,14 @@ +import hbs from 'htmlbars-inline-precompile'; +import { storiesOf } from '@storybook/ember'; +import { withKnobs } from '@storybook/addon-knobs'; + +storiesOf('BarChart', module) + .addParameters({ options: { showPanel: true } }) + .addDecorator(withKnobs()) + .add(`BarChart`, () => ({ + template: hbs` +
Bar Chart
+ + `, + context: {}, + })); diff --git a/ui/package.json b/ui/package.json index cafffb8ae6579..d2e870c01399e 100644 --- a/ui/package.json +++ b/ui/package.json @@ -97,6 +97,7 @@ "ember-concurrency-test-waiter": "^0.3.2", "ember-copy": "^1.0.0", "ember-cp-validations": "^4.0.0-beta.12", + "ember-d3": "^0.5.1", "ember-data": "~3.22.0", "ember-data-model-fragments": "5.0.0-beta.0", "ember-engines": "^0.8.3", diff --git a/ui/tests/integration/components/bar-chart-test.js b/ui/tests/integration/components/bar-chart-test.js new file mode 100644 index 0000000000000..fcd8c12dc272f --- /dev/null +++ b/ui/tests/integration/components/bar-chart-test.js @@ -0,0 +1,26 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | bar-chart', function(hooks) { + setupRenderingTest(hooks); + + test('it renders', async function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.equal(this.element.textContent.trim(), ''); + + // Template block usage: + await render(hbs` + + template block text + + `); + + assert.equal(this.element.textContent.trim(), 'template block text'); + }); +}); diff --git a/ui/yarn.lock b/ui/yarn.lock index 20373c586a03a..a7a2b3491144e 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -6288,6 +6288,11 @@ command-line-usage@^4.1.0: table-layout "^0.4.2" typical "^2.6.1" +commander@2, commander@^2.15.1, commander@^2.20.0, commander@^2.6.0: + version "2.20.3" + resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" + integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== + commander@2.8.x: version "2.8.1" resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4" @@ -6300,11 +6305,6 @@ commander@7.1.0: resolved "https://registry.yarnpkg.com/commander/-/commander-7.1.0.tgz#f2eaecf131f10e36e07d894698226e36ae0eb5ff" integrity sha512-pRxBna3MJe6HKnBGsDyMv8ETbptw3axEdYHoqNh7gu5oDcew8fs0xnivZGm06Ogk8zGAJ9VX+OPEr2GXEQK4dg== -commander@^2.15.1, commander@^2.20.0, commander@^2.6.0: - version "2.20.3" - resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" - integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== - commander@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068" @@ -6853,16 +6853,35 @@ cyclist@^1.0.1: resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk= -d3-array@^1.2.0: +d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0: version "1.2.4" resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f" integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw== -d3-axis@^1.0.8: +d3-axis@1, d3-axis@^1.0.8: version "1.0.12" resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-1.0.12.tgz#cdf20ba210cfbb43795af33756886fb3638daac9" integrity sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ== +d3-brush@1: + version "1.1.6" + resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-1.1.6.tgz#b0a22c7372cabec128bdddf9bddc058592f89e9b" + integrity sha512-7RW+w7HfMCPyZLifTz/UnJmI5kdkXtpCbombUSs8xniAyo0vIbrDzDwUJB6eJOgl9u5DQOt2TQlYumxzD1SvYA== + dependencies: + d3-dispatch "1" + d3-drag "1" + d3-interpolate "1" + d3-selection "1" + d3-transition "1" + +d3-chord@1: + version "1.0.6" + resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-1.0.6.tgz#309157e3f2db2c752f0280fedd35f2067ccbb15f" + integrity sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA== + dependencies: + d3-array "1" + d3-path "1" + d3-collection@1, d3-collection@^1.0.4: version "1.0.7" resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.7.tgz#349bd2aa9977db071091c13144d5e4f16b5b310e" @@ -6873,21 +6892,74 @@ d3-color@1: resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.4.1.tgz#c52002bf8846ada4424d55d97982fef26eb3bc8a" integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q== +d3-contour@1: + version "1.3.2" + resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-1.3.2.tgz#652aacd500d2264cb3423cee10db69f6f59bead3" + integrity sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg== + dependencies: + d3-array "^1.1.1" + d3-dispatch@1: version "1.0.6" resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.6.tgz#00d37bcee4dd8cd97729dd893a0ac29caaba5d58" integrity sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA== +d3-drag@1: + version "1.2.5" + resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.2.5.tgz#2537f451acd39d31406677b7dc77c82f7d988f70" + integrity sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w== + dependencies: + d3-dispatch "1" + d3-selection "1" + +d3-dsv@1: + version "1.2.0" + resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-1.2.0.tgz#9d5f75c3a5f8abd611f74d3f5847b0d4338b885c" + integrity sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g== + dependencies: + commander "2" + iconv-lite "0.4" + rw "1" + d3-ease@1, d3-ease@^1.0.5: version "1.0.7" resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.7.tgz#9a834890ef8b8ae8c558b2fe55bd57f5993b85e2" integrity sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ== +d3-fetch@1: + version "1.2.0" + resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-1.2.0.tgz#15ce2ecfc41b092b1db50abd2c552c2316cf7fc7" + integrity sha512-yC78NBVcd2zFAyR/HnUiBS7Lf6inSCoWcSxFfw8FYL7ydiqe80SazNwoffcqOfs95XaLo7yebsmQqDKSsXUtvA== + dependencies: + d3-dsv "1" + +d3-force@1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.2.1.tgz#fd29a5d1ff181c9e7f0669e4bd72bdb0e914ec0b" + integrity sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg== + dependencies: + d3-collection "1" + d3-dispatch "1" + d3-quadtree "1" + d3-timer "1" + d3-format@1: version "1.4.5" resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4" integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ== +d3-geo@1: + version "1.12.1" + resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.12.1.tgz#7fc2ab7414b72e59fbcbd603e80d9adc029b035f" + integrity sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg== + dependencies: + d3-array "1" + +d3-hierarchy@1: + version "1.1.9" + resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz#2f6bee24caaea43f8dc37545fa01628559647a83" + integrity sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ== + d3-interpolate@1: version "1.4.0" resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.4.0.tgz#526e79e2d80daa383f9e0c1c1c7dcc0f0583e987" @@ -6895,6 +6967,46 @@ d3-interpolate@1: dependencies: d3-color "1" +d3-path@1: + version "1.0.9" + resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf" + integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg== + +d3-polygon@1: + version "1.0.6" + resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-1.0.6.tgz#0bf8cb8180a6dc107f518ddf7975e12abbfbd38e" + integrity sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ== + +d3-quadtree@1: + version "1.0.7" + resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.7.tgz#ca8b84df7bb53763fe3c2f24bd435137f4e53135" + integrity sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA== + +d3-random@1: + version "1.1.2" + resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-1.1.2.tgz#2833be7c124360bf9e2d3fd4f33847cfe6cab291" + integrity sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ== + +d3-scale-chromatic@1: + version "1.5.0" + resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz#54e333fc78212f439b14641fb55801dd81135a98" + integrity sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg== + dependencies: + d3-color "1" + d3-interpolate "1" + +d3-scale@2: + version "2.2.2" + resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-2.2.2.tgz#4e880e0b2745acaaddd3ede26a9e908a9e17b81f" + integrity sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw== + dependencies: + d3-array "^1.2.0" + d3-collection "1" + d3-format "1" + d3-interpolate "1" + d3-time "1" + d3-time-format "2" + d3-scale@^1.0.7: version "1.0.7" resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.7.tgz#fa90324b3ea8a776422bd0472afab0b252a0945d" @@ -6908,11 +7020,26 @@ d3-scale@^1.0.7: d3-time "1" d3-time-format "2" -d3-selection@^1.1.0, d3-selection@^1.3.0: +d3-selection-multi@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/d3-selection-multi/-/d3-selection-multi-1.0.1.tgz#cd6c25413d04a2cb97470e786f2cd877f3e34f58" + integrity sha1-zWwlQT0EosuXRw54byzYd/PjT1g= + dependencies: + d3-selection "1" + d3-transition "1" + +d3-selection@1, d3-selection@^1.1.0, d3-selection@^1.3.0: version "1.4.2" resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.2.tgz#dcaa49522c0dbf32d6c1858afc26b6094555bc5c" integrity sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg== +d3-shape@1: + version "1.3.7" + resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7" + integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw== + dependencies: + d3-path "1" + d3-time-format@2, d3-time-format@^2.1.1: version "2.3.0" resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.3.0.tgz#107bdc028667788a8924ba040faf1fbccd5a7850" @@ -6938,7 +7065,7 @@ d3-tip@^0.9.1: d3-collection "^1.0.4" d3-selection "^1.3.0" -d3-transition@^1.2.0: +d3-transition@1, d3-transition@^1.2.0: version "1.3.2" resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.3.2.tgz#a98ef2151be8d8600543434c1ca80140ae23b398" integrity sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA== @@ -6950,6 +7077,59 @@ d3-transition@^1.2.0: d3-selection "^1.1.0" d3-timer "1" +d3-voronoi@1: + version "1.1.4" + resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.4.tgz#dd3c78d7653d2bb359284ae478645d95944c8297" + integrity sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg== + +d3-zoom@1: + version "1.8.3" + resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-1.8.3.tgz#b6a3dbe738c7763121cd05b8a7795ffe17f4fc0a" + integrity sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ== + dependencies: + d3-dispatch "1" + d3-drag "1" + d3-interpolate "1" + d3-selection "1" + d3-transition "1" + +d3@^5.0.0: + version "5.16.0" + resolved "https://registry.yarnpkg.com/d3/-/d3-5.16.0.tgz#9c5e8d3b56403c79d4ed42fbd62f6113f199c877" + integrity sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw== + dependencies: + d3-array "1" + d3-axis "1" + d3-brush "1" + d3-chord "1" + d3-collection "1" + d3-color "1" + d3-contour "1" + d3-dispatch "1" + d3-drag "1" + d3-dsv "1" + d3-ease "1" + d3-fetch "1" + d3-force "1" + d3-format "1" + d3-geo "1" + d3-hierarchy "1" + d3-interpolate "1" + d3-path "1" + d3-polygon "1" + d3-quadtree "1" + d3-random "1" + d3-scale "2" + d3-scale-chromatic "1" + d3-selection "1" + d3-shape "1" + d3-time "1" + d3-time-format "2" + d3-timer "1" + d3-transition "1" + d3-voronoi "1" + d3-zoom "1" + dag-map@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/dag-map/-/dag-map-2.0.2.tgz#9714b472de82a1843de2fba9b6876938cab44c68" @@ -8241,6 +8421,17 @@ ember-cp-validations@^4.0.0-beta.12: ember-require-module "^0.3.0" ember-validators "^3.0.1" +ember-d3@^0.5.1: + version "0.5.1" + resolved "https://registry.yarnpkg.com/ember-d3/-/ember-d3-0.5.1.tgz#b23ce145863f082b5e73d25d9a43a0f1d9e9f412" + integrity sha512-NyjTUuIOxGxZdyrxLasNwwjqyFgay1pVHGRAWFj7mriwTI44muKsM9ZMl6YeepqixceuFig2fDxHmLLrkQV+QQ== + dependencies: + broccoli-funnel "^2.0.0" + broccoli-merge-trees "^3.0.0" + d3 "^5.0.0" + d3-selection-multi "^1.0.1" + ember-cli-babel "^7.1.2" + ember-data-model-fragments@5.0.0-beta.0: version "5.0.0-beta.0" resolved "https://registry.yarnpkg.com/ember-data-model-fragments/-/ember-data-model-fragments-5.0.0-beta.0.tgz#da90799970317ca852f96b2ea1548ca70094a5bb" @@ -11064,7 +11255,7 @@ human-signals@^1.1.1: resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3" integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw== -iconv-lite@0.4.24, iconv-lite@^0.4.24: +iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA== @@ -15927,6 +16118,11 @@ run-queue@^1.0.0, run-queue@^1.0.3: dependencies: aproba "^1.1.1" +rw@1: + version "1.3.3" + resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4" + integrity sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q= + rxjs@^6.4.0, rxjs@^6.5.2, rxjs@^6.6.0, rxjs@^6.6.7: version "6.6.7" resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9" From 9c28a8b652f3431558aaf022b902e43e702a7766 Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Mon, 16 Aug 2021 14:17:30 -0700 Subject: [PATCH 02/48] WIP//starts styling --- ui/app/styles/components/bar-chart.scss | 10 +++ ui/app/styles/core.scss | 1 + .../templates/vault/cluster/metrics/index.hbs | 79 +------------------ ui/lib/core/addon/components/bar-chart.js | 36 ++++++++- .../addon/templates/components/bar-chart.hbs | 10 ++- 5 files changed, 54 insertions(+), 82 deletions(-) create mode 100644 ui/app/styles/components/bar-chart.scss diff --git a/ui/app/styles/components/bar-chart.scss b/ui/app/styles/components/bar-chart.scss new file mode 100644 index 0000000000000..cd1d8ef279f34 --- /dev/null +++ b/ui/app/styles/components/bar-chart.scss @@ -0,0 +1,10 @@ +.bar-chart { + width: 751px; + height: 405px; + left: 58px; + top: 665px; + border: 1px solid #dce0e6; + box-sizing: border-box; + border-radius: 4px; + padding: 24px 24px 12px; +} diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index a2d5b1abafd15..a8934b497e117 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -45,6 +45,7 @@ @import './components/auth-buttons'; @import './components/auth-form'; @import './components/b64-toggle'; +@import './components/bar-chart'; @import './components/box-label'; @import './components/box-radio'; @import './components/codemirror'; diff --git a/ui/app/templates/vault/cluster/metrics/index.hbs b/ui/app/templates/vault/cluster/metrics/index.hbs index a783fb0dd28e0..2145c0be74619 100644 --- a/ui/app/templates/vault/cluster/metrics/index.hbs +++ b/ui/app/templates/vault/cluster/metrics/index.hbs @@ -1,78 +1 @@ - - -

- Metrics -

- - - -
- -
- -{{#if (eq model.config.queriesAvailable false)}} - {{#if (eq model.config.enabled "On")}} - - {{else}} - -

Go to configuration

- - {{/if}} -{{else}} -
- {{#if (eq model.config.enabled 'Off')}} - - This feature is currently disabled and data is not being collected. Edit the configuration to enable tracking again. - - {{/if}} -

The active clients metric contributes to billing. It is collected at the end of each month alongside unique entities and direct active tokens. The data below includes the current namespace and all its children.

- - {{#unless model.activity.total}} - - {{else}} -
- - - -
- {{/unless}} -
-{{/if}} + \ No newline at end of file diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index 4f2fdcd975e40..2518f9a9b8556 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -11,10 +11,42 @@ * @param {string} [param1=defaultValue] - param1 is... */ -import Component from '@glimmer/component'; +import Component from '@ember/component'; +// import Component from '@glimmer/component'; import layout from '../templates/components/bar-chart'; import { setComponentTemplate } from '@ember/component'; +import { select } from 'd3-selection'; +import { action } from '@ember/object'; +import { scaleLinear, scaleBand } from 'd3-scale'; +class BarChart extends Component { + dataArray = [ + { namespace: 'top-namespace', count: 87 }, + { namespace: 'namespace2', count: 43 }, + { namespace: 'longnamenamespace', count: 23 }, + { namespace: 'path/to/namespace', count: 14 }, + ]; -class BarChart extends Component {} + calculateMaxValue(dataset) { + let counts = dataset.map(data => data.count); + return Math.max(...counts); + } + + @action + renderBarChart() { + let xScale = scaleLinear() + .domain([0, this.calculateMaxValue(this.dataArray)]) // min and max values of dataset + .range([0, 150]); + + let svg = select('#bar-chart'); + svg + .selectAll('rect') + .data(this.dataArray) + .enter() + .append('rect') + .attr('width', namespace => xScale(namespace.count)) + .attr('height', 6) + .attr('y', (namespace, index) => index * 20); + } +} export default setComponentTemplate(layout, BarChart); diff --git a/ui/lib/core/addon/templates/components/bar-chart.hbs b/ui/lib/core/addon/templates/components/bar-chart.hbs index 90cc1201575cf..b3939edd66888 100644 --- a/ui/lib/core/addon/templates/components/bar-chart.hbs +++ b/ui/lib/core/addon/templates/components/bar-chart.hbs @@ -1,3 +1,9 @@ -One day I'll be a real nice bar chart +



+

Top 10 namespaces

+

Each namespace's client count includes clients in child namespaces.

+ - \ No newline at end of file + \ No newline at end of file From 3095db03987e728d57c20c74febf4b0b37536e9e Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Mon, 16 Aug 2021 15:23:05 -0700 Subject: [PATCH 03/48] fixes width of bars --- ui/app/styles/components/bar-chart.scss | 35 ++++++++++++++++--- ui/lib/core/addon/components/bar-chart.js | 22 ++++++++---- .../addon/templates/components/bar-chart.hbs | 20 ++++++----- 3 files changed, 57 insertions(+), 20 deletions(-) diff --git a/ui/app/styles/components/bar-chart.scss b/ui/app/styles/components/bar-chart.scss index cd1d8ef279f34..48351ed357037 100644 --- a/ui/app/styles/components/bar-chart.scss +++ b/ui/app/styles/components/bar-chart.scss @@ -1,10 +1,35 @@ -.bar-chart { +.bar-chart-container { width: 751px; height: 405px; - left: 58px; - top: 665px; border: 1px solid #dce0e6; - box-sizing: border-box; border-radius: 4px; - padding: 24px 24px 12px; + padding: 24px, 24px, 12px, 24px; + + > div.is-border { + border: 0.75px solid #dce0e6; + width: 703px; + margin: 5px 24px 0px 24px; + } +} + +.bar-chart { + width: 100%; + height: 100%; + padding: 27px 24px 26px 24px; +} + +.chart-header { + margin: 24px 0px 0px 24px; +} + +.chart-title { + font-size: $size-5; + font-weight: $font-weight-bold; + line-height: normal; +} + +.chart-description { + font-size: $size-8; + font-weight: $font-weight-normal; + color: $ui-gray-700; } diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index 2518f9a9b8556..bb6bdf1bf0500 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -17,17 +17,24 @@ import layout from '../templates/components/bar-chart'; import { setComponentTemplate } from '@ember/component'; import { select } from 'd3-selection'; import { action } from '@ember/object'; -import { scaleLinear, scaleBand } from 'd3-scale'; +import { scaleLinear } from 'd3-scale'; class BarChart extends Component { dataArray = [ - { namespace: 'top-namespace', count: 87 }, - { namespace: 'namespace2', count: 43 }, - { namespace: 'longnamenamespace', count: 23 }, - { namespace: 'path/to/namespace', count: 14 }, + { namespace: 'top-namespace', count: 1512 }, + { namespace: 'namespace2', count: 1300 }, + { namespace: 'longnamenamespace', count: 1200 }, + { namespace: 'anothernamespace', count: 1004 }, + { namespace: 'namespacesomething', count: 950 }, + { namespace: 'namespace5', count: 800 }, + { namespace: 'namespace', count: 700 }, + { namespace: 'namespace999', count: 650 }, + { namespace: 'name-space', count: 600 }, + { namespace: 'path/to/namespace', count: 300 }, ]; calculateMaxValue(dataset) { let counts = dataset.map(data => data.count); + // turns array of counts into an argument list return Math.max(...counts); } @@ -35,7 +42,7 @@ class BarChart extends Component { renderBarChart() { let xScale = scaleLinear() .domain([0, this.calculateMaxValue(this.dataArray)]) // min and max values of dataset - .range([0, 150]); + .range([0, 650]); let svg = select('#bar-chart'); svg @@ -45,7 +52,8 @@ class BarChart extends Component { .append('rect') .attr('width', namespace => xScale(namespace.count)) .attr('height', 6) - .attr('y', (namespace, index) => index * 20); + .attr('y', (namespace, index) => index * 20) + .attr('fill', '#BFD4FF'); } } diff --git a/ui/lib/core/addon/templates/components/bar-chart.hbs b/ui/lib/core/addon/templates/components/bar-chart.hbs index b3939edd66888..24811461a0fd6 100644 --- a/ui/lib/core/addon/templates/components/bar-chart.hbs +++ b/ui/lib/core/addon/templates/components/bar-chart.hbs @@ -1,9 +1,13 @@



-

Top 10 namespaces

-

Each namespace's client count includes clients in child namespaces.

- - - \ No newline at end of file +
+
+

Top 10 namespaces

+

Each namespace's client count includes clients in child namespaces.

+
+
+ + +
\ No newline at end of file From 0ec54d1d3572bb99e09c473922a8b9bc2506ae61 Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Mon, 16 Aug 2021 15:40:46 -0700 Subject: [PATCH 04/48] WIP//barchart --- .../templates/vault/cluster/metrics/index.hbs | 2 +- ui/lib/core/addon/components/bar-chart.js | 42 +++++++++---------- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/ui/app/templates/vault/cluster/metrics/index.hbs b/ui/app/templates/vault/cluster/metrics/index.hbs index 2145c0be74619..89fe15a86b62a 100644 --- a/ui/app/templates/vault/cluster/metrics/index.hbs +++ b/ui/app/templates/vault/cluster/metrics/index.hbs @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index bb6bdf1bf0500..3b081cfd2f020 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -11,29 +11,29 @@ * @param {string} [param1=defaultValue] - param1 is... */ -import Component from '@ember/component'; -// import Component from '@glimmer/component'; +import Component from '@glimmer/component'; import layout from '../templates/components/bar-chart'; import { setComponentTemplate } from '@ember/component'; -import { select } from 'd3-selection'; import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; +import { select } from 'd3-selection'; import { scaleLinear } from 'd3-scale'; class BarChart extends Component { - dataArray = [ - { namespace: 'top-namespace', count: 1512 }, - { namespace: 'namespace2', count: 1300 }, - { namespace: 'longnamenamespace', count: 1200 }, - { namespace: 'anothernamespace', count: 1004 }, - { namespace: 'namespacesomething', count: 950 }, - { namespace: 'namespace5', count: 800 }, - { namespace: 'namespace', count: 700 }, - { namespace: 'namespace999', count: 650 }, - { namespace: 'name-space', count: 600 }, - { namespace: 'path/to/namespace', count: 300 }, + dataset = [ + { label: 'top-namespace', count: 1512 }, + { label: 'namespace2', count: 1300 }, + { label: 'longnamenamespace', count: 1200 }, + { label: 'anothernamespace', count: 1004 }, + { label: 'namespacesomething', count: 950 }, + { label: 'namespace5', count: 800 }, + { label: 'namespace', count: 700 }, + { label: 'namespace999', count: 650 }, + { label: 'name-space', count: 600 }, + { label: 'path/to/namespace', count: 300 }, ]; - calculateMaxValue(dataset) { - let counts = dataset.map(data => data.count); + calculateMaxValue(data) { + let counts = data.map(data => data.count); // turns array of counts into an argument list return Math.max(...counts); } @@ -41,18 +41,18 @@ class BarChart extends Component { @action renderBarChart() { let xScale = scaleLinear() - .domain([0, this.calculateMaxValue(this.dataArray)]) // min and max values of dataset - .range([0, 650]); + .domain([0, this.calculateMaxValue(this.dataset)]) // min and max values of dataset + .range([0, 90]); // bar length will expand to 90% of container let svg = select('#bar-chart'); svg .selectAll('rect') - .data(this.dataArray) + .data(this.dataset) .enter() .append('rect') - .attr('width', namespace => xScale(namespace.count)) + .attr('width', label => `${xScale(label.count)}%`) .attr('height', 6) - .attr('y', (namespace, index) => index * 20) + .attr('y', (label, index) => index * 20) .attr('fill', '#BFD4FF'); } } From 8f3b7354e30323febee1ab4d84bf77dcb1be3950 Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Tue, 17 Aug 2021 10:24:30 -0700 Subject: [PATCH 05/48] uses d3 max method instead of Math.max --- ui/lib/core/addon/components/bar-chart.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index 3b081cfd2f020..fde0475dce674 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -18,6 +18,7 @@ import { action } from '@ember/object'; import { tracked } from '@glimmer/tracking'; import { select } from 'd3-selection'; import { scaleLinear } from 'd3-scale'; +import { max } from 'd3-array'; class BarChart extends Component { dataset = [ { label: 'top-namespace', count: 1512 }, @@ -32,17 +33,11 @@ class BarChart extends Component { { label: 'path/to/namespace', count: 300 }, ]; - calculateMaxValue(data) { - let counts = data.map(data => data.count); - // turns array of counts into an argument list - return Math.max(...counts); - } - @action renderBarChart() { let xScale = scaleLinear() - .domain([0, this.calculateMaxValue(this.dataset)]) // min and max values of dataset - .range([0, 90]); // bar length will expand to 90% of container + .domain([0, max(this.dataset, d => d.count)]) // min and max values of dataset + .range([0, 90]); // max bar will expand to 90% of container let svg = select('#bar-chart'); svg From 0f03ffcd3ffc31e132e06d576763d24311ac9b8d Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Tue, 17 Aug 2021 12:51:31 -0700 Subject: [PATCH 06/48] stacks data --- .../templates/vault/cluster/metrics/index.hbs | 5 +- ui/lib/core/addon/components/bar-chart.js | 74 ++++++++++++++----- .../addon/templates/components/bar-chart.hbs | 14 ++-- 3 files changed, 65 insertions(+), 28 deletions(-) diff --git a/ui/app/templates/vault/cluster/metrics/index.hbs b/ui/app/templates/vault/cluster/metrics/index.hbs index 89fe15a86b62a..7456ba4c24624 100644 --- a/ui/app/templates/vault/cluster/metrics/index.hbs +++ b/ui/app/templates/vault/cluster/metrics/index.hbs @@ -1 +1,4 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index fde0475dce674..9ac448a8902d4 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -19,36 +19,70 @@ import { tracked } from '@glimmer/tracking'; import { select } from 'd3-selection'; import { scaleLinear } from 'd3-scale'; import { max } from 'd3-array'; +import { stack as d3Layout } from 'd3-shape'; + +const BAR_HEIGHT = 6; // bar height in pixels; +const BAR_SPACING = 20; // bar spacing in pixel class BarChart extends Component { dataset = [ - { label: 'top-namespace', count: 1512 }, - { label: 'namespace2', count: 1300 }, - { label: 'longnamenamespace', count: 1200 }, - { label: 'anothernamespace', count: 1004 }, - { label: 'namespacesomething', count: 950 }, - { label: 'namespace5', count: 800 }, - { label: 'namespace', count: 700 }, - { label: 'namespace999', count: 650 }, - { label: 'name-space', count: 600 }, - { label: 'path/to/namespace', count: 300 }, + { label: 'top-namespace', count: 1512, unique: 300 }, + { label: 'namespace2', count: 1300, unique: 250 }, + { label: 'longnamenamespace', count: 1200, unique: 200 }, + { label: 'anothernamespace', count: 1004, unique: 150 }, + { label: 'namespacesomething', count: 950, unique: 100 }, + { label: 'namespace5', count: 800, unique: 75 }, + { label: 'namespace', count: 700, unique: 50 }, + { label: 'namespace999', count: 650, unique: 40 }, + { label: 'name-space', count: 600, unique: 20 }, + { label: 'path/to/namespace', count: 300, unique: 10 }, ]; @action - renderBarChart() { + renderBarChart(element) { + let dataset = this.dataset; + let stack = d3Layout().keys(['count', 'unique']); + + let stackedData = stack(dataset); + console.log(stackedData, 'stackedData'); + let xScale = scaleLinear() - .domain([0, max(this.dataset, d => d.count)]) // min and max values of dataset - .range([0, 90]); // max bar will expand to 90% of container + .domain([0, max(this.dataset, d => d.count + d.unique)]) // min and max values of dataset + .range([0, 100]); // range is from 0-100% - let svg = select('#bar-chart'); - svg + let svg = select(element); + + let colors = ['#BFD4FF', '#8AB1FF']; + // Add a group for each row of data + let groups = svg + .selectAll('g') + .data(stackedData) + .enter() + .append('g') + .style('fill', function(d, i) { + return colors[i]; + }); + // Add a rect for each data value + let rects = groups .selectAll('rect') - .data(this.dataset) + .data(function(d) { + return d; + }) .enter() .append('rect') - .attr('width', label => `${xScale(label.count)}%`) - .attr('height', 6) - .attr('y', (label, index) => index * 20) - .attr('fill', '#BFD4FF'); + .attr('width', dataValue => `${xScale(dataValue[1] - dataValue[0])}%`) + .attr('x', dataValue => `${xScale(dataValue[0])}%`) + .attr('height', BAR_HEIGHT) + .attr('y', (label, index) => index * BAR_SPACING); + + // svg + // .selectAll('rect') + // .data(this.dataset) + // .enter() + // .append('rect') + // .attr('width', label => `${xScale(label.count)}%`) + // .attr('height', BAR_HEIGHT) + // .attr('y', (label, index) => index * BAR_SPACING) + // .attr('fill', '#BFD4FF'); } } diff --git a/ui/lib/core/addon/templates/components/bar-chart.hbs b/ui/lib/core/addon/templates/components/bar-chart.hbs index 24811461a0fd6..30dff597e4743 100644 --- a/ui/lib/core/addon/templates/components/bar-chart.hbs +++ b/ui/lib/core/addon/templates/components/bar-chart.hbs @@ -1,13 +1,13 @@



-

Top 10 namespaces

-

Each namespace's client count includes clients in child namespaces.

+

{{@title}}

+

{{@description}}

- - + {{!-- add conditional here to check for data --}} + +
\ No newline at end of file From 83af87e2b9bb21df36bf66f43e83fd30570b1c30 Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Tue, 17 Aug 2021 16:26:34 -0700 Subject: [PATCH 07/48] adds y axis --- ui/lib/core/addon/components/bar-chart.js | 61 +++++++++++------------ 1 file changed, 28 insertions(+), 33 deletions(-) diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index 9ac448a8902d4..087446ba573f4 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -15,15 +15,18 @@ import Component from '@glimmer/component'; import layout from '../templates/components/bar-chart'; import { setComponentTemplate } from '@ember/component'; import { action } from '@ember/object'; -import { tracked } from '@glimmer/tracking'; import { select } from 'd3-selection'; -import { scaleLinear } from 'd3-scale'; +import { scaleLinear, scaleBand } from 'd3-scale'; import { max } from 'd3-array'; -import { stack as d3Layout } from 'd3-shape'; +import { stack } from 'd3-shape'; +import { axisLeft } from 'd3-axis'; + +const BAR_THICKNESS = 6; // bar thickness in pixels; +const BAR_SPACING = 20; // spacing between bars in pixels +const CHART_MARGIN = { top: 0, right: 24, bottom: 26, left: 137 }; -const BAR_HEIGHT = 6; // bar height in pixels; -const BAR_SPACING = 20; // bar spacing in pixel class BarChart extends Component { + // make xValue and yValue consts? i.e. yValue = dataset.map(d => d.label) dataset = [ { label: 'top-namespace', count: 1512, unique: 300 }, { label: 'namespace2', count: 1300, unique: 250 }, @@ -40,49 +43,41 @@ class BarChart extends Component { @action renderBarChart(element) { let dataset = this.dataset; - let stack = d3Layout().keys(['count', 'unique']); - - let stackedData = stack(dataset); - console.log(stackedData, 'stackedData'); + let stackFunction = stack().keys(['count', 'unique']); + let stackedData = stackFunction(dataset); let xScale = scaleLinear() - .domain([0, max(this.dataset, d => d.count + d.unique)]) // min and max values of dataset - .range([0, 100]); // range is from 0-100% + .domain([0, max(dataset, d => d.count + d.unique)]) // min and max values of dataset + .range([0, 100]); // range is 0-100% - let svg = select(element); + let yScale = scaleBand() + .domain(dataset.map(d => d.label)) + .range([0, 193]); + + let yAxis = axisLeft(yScale); + let svg = select(element); let colors = ['#BFD4FF', '#8AB1FF']; - // Add a group for each row of data + // add a group for each row of data let groups = svg .selectAll('g') .data(stackedData) .enter() .append('g') - .style('fill', function(d, i) { - return colors[i]; - }); - // Add a rect for each data value + .attr('transform', `translate(${CHART_MARGIN.left}, ${CHART_MARGIN.top})`) + .style('fill', (d, i) => colors[i]); + + yAxis(groups.append('g')); + // add a rect for each data value let rects = groups .selectAll('rect') - .data(function(d) { - return d; - }) + .data(d => d) .enter() .append('rect') - .attr('width', dataValue => `${xScale(dataValue[1] - dataValue[0])}%`) - .attr('x', dataValue => `${xScale(dataValue[0])}%`) - .attr('height', BAR_HEIGHT) + .attr('width', value => `${xScale(value[1] - value[0])}%`) + .attr('height', BAR_THICKNESS) + .attr('x', value => `${xScale(value[0])}%`) .attr('y', (label, index) => index * BAR_SPACING); - - // svg - // .selectAll('rect') - // .data(this.dataset) - // .enter() - // .append('rect') - // .attr('width', label => `${xScale(label.count)}%`) - // .attr('height', BAR_HEIGHT) - // .attr('y', (label, index) => index * BAR_SPACING) - // .attr('fill', '#BFD4FF'); } } From 3611871c6af1fc2038f8e28be585574f4449020c Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Thu, 19 Aug 2021 10:11:59 -0700 Subject: [PATCH 08/48] fixes styling and spacing --- ui/app/styles/components/bar-chart.scss | 7 ++++- ui/lib/core/addon/components/bar-chart.js | 28 ++++++++++--------- .../addon/templates/components/bar-chart.hbs | 7 ++--- 3 files changed, 24 insertions(+), 18 deletions(-) diff --git a/ui/app/styles/components/bar-chart.scss b/ui/app/styles/components/bar-chart.scss index 48351ed357037..d79bff2429acf 100644 --- a/ui/app/styles/components/bar-chart.scss +++ b/ui/app/styles/components/bar-chart.scss @@ -15,7 +15,7 @@ .bar-chart { width: 100%; height: 100%; - padding: 27px 24px 26px 24px; + padding: 17px 24px 26px 24px; // pad here? or modify in js file? } .chart-header { @@ -33,3 +33,8 @@ font-weight: $font-weight-normal; color: $ui-gray-700; } + +text { + font-weight: $font-weight-semibold; + font-size: $size-8; +} diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index 087446ba573f4..9361ca2fd3dae 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -23,8 +23,8 @@ import { axisLeft } from 'd3-axis'; const BAR_THICKNESS = 6; // bar thickness in pixels; const BAR_SPACING = 20; // spacing between bars in pixels -const CHART_MARGIN = { top: 0, right: 24, bottom: 26, left: 137 }; - +const CHART_MARGIN = { top: 10, right: 24, bottom: 26, left: 120 }; +const BAR_COLORS = ['#BFD4FF', '#8AB1FF']; class BarChart extends Component { // make xValue and yValue consts? i.e. yValue = dataset.map(d => d.label) dataset = [ @@ -34,7 +34,7 @@ class BarChart extends Component { { label: 'anothernamespace', count: 1004, unique: 150 }, { label: 'namespacesomething', count: 950, unique: 100 }, { label: 'namespace5', count: 800, unique: 75 }, - { label: 'namespace', count: 700, unique: 50 }, + { label: 'namespace', count: 400, unique: 300 }, { label: 'namespace999', count: 650, unique: 40 }, { label: 'name-space', count: 600, unique: 20 }, { label: 'path/to/namespace', count: 300, unique: 10 }, @@ -48,16 +48,16 @@ class BarChart extends Component { let xScale = scaleLinear() .domain([0, max(dataset, d => d.count + d.unique)]) // min and max values of dataset - .range([0, 100]); // range is 0-100% + .range([0, 75]); // range in percent (25% reserved for margins) let yScale = scaleBand() .domain(dataset.map(d => d.label)) - .range([0, 193]); - - let yAxis = axisLeft(yScale); + .range([0, dataset.length * 24]) // each bar element has a thickness (bar + padding) of 24 pixels + // paddingInner takes a number between 0 and 1 + // it tells the scale the percent of the total width it should reserve for white space between bars + .paddingInner(0.765); let svg = select(element); - let colors = ['#BFD4FF', '#8AB1FF']; // add a group for each row of data let groups = svg .selectAll('g') @@ -65,19 +65,21 @@ class BarChart extends Component { .enter() .append('g') .attr('transform', `translate(${CHART_MARGIN.left}, ${CHART_MARGIN.top})`) - .style('fill', (d, i) => colors[i]); + .style('fill', (d, i) => BAR_COLORS[i]); + let yAxis = axisLeft(yScale); yAxis(groups.append('g')); + // add a rect for each data value let rects = groups .selectAll('rect') .data(d => d) .enter() .append('rect') - .attr('width', value => `${xScale(value[1] - value[0])}%`) - .attr('height', BAR_THICKNESS) - .attr('x', value => `${xScale(value[0])}%`) - .attr('y', (label, index) => index * BAR_SPACING); + .attr('width', data => `${xScale(data[1] - data[0])}%`) + .attr('height', yScale.bandwidth()) + .attr('x', data => `${xScale(data[0])}%`) + .attr('y', data => yScale(data.data.label)); } } diff --git a/ui/lib/core/addon/templates/components/bar-chart.hbs b/ui/lib/core/addon/templates/components/bar-chart.hbs index 30dff597e4743..276694c1df457 100644 --- a/ui/lib/core/addon/templates/components/bar-chart.hbs +++ b/ui/lib/core/addon/templates/components/bar-chart.hbs @@ -6,8 +6,7 @@
{{!-- add conditional here to check for data --}} - - +
+ +
\ No newline at end of file From 5f42ea634aa84847e94b5175c853fce9bac9fe22 Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Thu, 19 Aug 2021 12:39:30 -0700 Subject: [PATCH 09/48] adds spacing between bars --- ui/app/styles/components/bar-chart.scss | 24 ++++++++++++++++++----- ui/lib/core/addon/components/bar-chart.js | 17 ++++++++++------ 2 files changed, 30 insertions(+), 11 deletions(-) diff --git a/ui/app/styles/components/bar-chart.scss b/ui/app/styles/components/bar-chart.scss index d79bff2429acf..0c7bc3e9dd596 100644 --- a/ui/app/styles/components/bar-chart.scss +++ b/ui/app/styles/components/bar-chart.scss @@ -16,6 +16,25 @@ width: 100%; height: 100%; padding: 17px 24px 26px 24px; // pad here? or modify in js file? + + text { + font-weight: $font-weight-semibold; + font-size: $size-8; + } + + // rect { + // rx: 3; + // ry: 3; + // } + + // style here? or in .js file + // line { + // visibility: hidden; + // } + + // .domain { + // visibility: hidden; + // } } .chart-header { @@ -33,8 +52,3 @@ font-weight: $font-weight-normal; color: $ui-gray-700; } - -text { - font-weight: $font-weight-semibold; - font-size: $size-8; -} diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index 9361ca2fd3dae..53a54781fb12c 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -23,7 +23,7 @@ import { axisLeft } from 'd3-axis'; const BAR_THICKNESS = 6; // bar thickness in pixels; const BAR_SPACING = 20; // spacing between bars in pixels -const CHART_MARGIN = { top: 10, right: 24, bottom: 26, left: 120 }; +const CHART_MARGIN = { top: 10, right: 24, bottom: 26, left: 137 }; const BAR_COLORS = ['#BFD4FF', '#8AB1FF']; class BarChart extends Component { // make xValue and yValue consts? i.e. yValue = dataset.map(d => d.label) @@ -37,18 +37,19 @@ class BarChart extends Component { { label: 'namespace', count: 400, unique: 300 }, { label: 'namespace999', count: 650, unique: 40 }, { label: 'name-space', count: 600, unique: 20 }, - { label: 'path/to/namespace', count: 300, unique: 10 }, + { label: 'path/to/namespace', count: 300, unique: 499 }, ]; @action renderBarChart(element) { - let dataset = this.dataset; + let dataset = this.dataset.sort((a, b) => a.count + a.unique - (b.count + b.unique)).reverse(); + let stackFunction = stack().keys(['count', 'unique']); let stackedData = stackFunction(dataset); let xScale = scaleLinear() .domain([0, max(dataset, d => d.count + d.unique)]) // min and max values of dataset - .range([0, 75]); // range in percent (25% reserved for margins) + .range([0, 70]); // range in percent (30% reserved for margins) let yScale = scaleBand() .domain(dataset.map(d => d.label)) @@ -59,6 +60,7 @@ class BarChart extends Component { let svg = select(element); // add a group for each row of data + let groups = svg .selectAll('g') .data(stackedData) @@ -67,19 +69,22 @@ class BarChart extends Component { .attr('transform', `translate(${CHART_MARGIN.left}, ${CHART_MARGIN.top})`) .style('fill', (d, i) => BAR_COLORS[i]); + // yAxis legend let yAxis = axisLeft(yScale); yAxis(groups.append('g')); - // add a rect for each data value let rects = groups .selectAll('rect') .data(d => d) .enter() .append('rect') - .attr('width', data => `${xScale(data[1] - data[0])}%`) + .attr('width', data => `${xScale(data[1] - data[0] - 10)}%`) .attr('height', yScale.bandwidth()) .attr('x', data => `${xScale(data[0])}%`) .attr('y', data => yScale(data.data.label)); + + // style here? or in .css file + groups.selectAll('.domain, .tick line').remove(); } } From 704bdfd2751b19cab2ce27a2e4efa7a9212218da Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Thu, 19 Aug 2021 17:02:23 -0700 Subject: [PATCH 10/48] styling DONE --- ui/app/styles/components/bar-chart.scss | 16 ++++-- ui/lib/core/addon/components/bar-chart.js | 59 ++++++++++++++++++----- 2 files changed, 58 insertions(+), 17 deletions(-) diff --git a/ui/app/styles/components/bar-chart.scss b/ui/app/styles/components/bar-chart.scss index 0c7bc3e9dd596..879c34d20de4e 100644 --- a/ui/app/styles/components/bar-chart.scss +++ b/ui/app/styles/components/bar-chart.scss @@ -17,15 +17,21 @@ height: 100%; padding: 17px 24px 26px 24px; // pad here? or modify in js file? - text { + .total-value { + font-weight: $font-weight-normal; + color: $black; + font-size: $size-8; + } + + .tick > text { font-weight: $font-weight-semibold; font-size: $size-8; } - // rect { - // rx: 3; - // ry: 3; - // } + rect { + rx: 3; + ry: 3; + } // style here? or in .js file // line { diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index 53a54781fb12c..b641a85a5baf1 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -20,6 +20,7 @@ import { scaleLinear, scaleBand } from 'd3-scale'; import { max } from 'd3-array'; import { stack } from 'd3-shape'; import { axisLeft } from 'd3-axis'; +import { format } from 'd3-format'; const BAR_THICKNESS = 6; // bar thickness in pixels; const BAR_SPACING = 20; // spacing between bars in pixels @@ -28,24 +29,23 @@ const BAR_COLORS = ['#BFD4FF', '#8AB1FF']; class BarChart extends Component { // make xValue and yValue consts? i.e. yValue = dataset.map(d => d.label) dataset = [ - { label: 'top-namespace', count: 1512, unique: 300 }, - { label: 'namespace2', count: 1300, unique: 250 }, - { label: 'longnamenamespace', count: 1200, unique: 200 }, - { label: 'anothernamespace', count: 1004, unique: 150 }, - { label: 'namespacesomething', count: 950, unique: 100 }, - { label: 'namespace5', count: 800, unique: 75 }, + { label: 'top-namespace', count: 1212, unique: 300 }, + { label: 'namespace2', count: 650, unique: 550 }, + { label: 'longnamenamespace', count: 200, unique: 1000 }, + { label: 'anothernamespace', count: 400, unique: 550 }, + { label: 'namespacesomething', count: 400, unique: 400 }, + { label: 'namespace5', count: 800, unique: 300 }, { label: 'namespace', count: 400, unique: 300 }, - { label: 'namespace999', count: 650, unique: 40 }, - { label: 'name-space', count: 600, unique: 20 }, - { label: 'path/to/namespace', count: 300, unique: 499 }, + { label: 'namespace999', count: 350, unique: 250 }, + { label: 'name-space', count: 450, unique: 200 }, + { label: 'path/to/namespace', count: 200, unique: 100 }, ]; @action renderBarChart(element) { let dataset = this.dataset.sort((a, b) => a.count + a.unique - (b.count + b.unique)).reverse(); - let stackFunction = stack().keys(['count', 'unique']); - let stackedData = stackFunction(dataset); + let stackedData = stackFunction(dataset); // returns an array of coordinates for each rectangle group, first group is for counts (left), second for unique (right) let xScale = scaleLinear() .domain([0, max(dataset, d => d.count + d.unique)]) // min and max values of dataset @@ -81,7 +81,42 @@ class BarChart extends Component { .attr('width', data => `${xScale(data[1] - data[0] - 10)}%`) .attr('height', yScale.bandwidth()) .attr('x', data => `${xScale(data[0])}%`) - .attr('y', data => yScale(data.data.label)); + .attr('y', ({ data }) => yScale(data.label)); + + let totalNumbers = []; + stackedData[1].forEach(e => { + let n = e[1]; + totalNumbers.push(n); + }); + + let textData = []; + rects.each(function(d, i) { + // if (d[0] !== 0){ + let textDatum = { + text: totalNumbers[i], + x: parseFloat(select(this).attr('width')) + parseFloat(select(this).attr('x')), + y: parseFloat(select(this).attr('y')) + parseFloat(select(this).attr('height')), + }; + textData.push(textDatum); + // }; + }); + + let text = groups + .selectAll('text') + .data(textData) + .enter() + .append('text') + .text(d => d.text) + .attr('fill', '#000') + .attr('class', 'total-value') + .attr('text-anchor', 'start') + .attr('y', d => { + return `${d.y}`; + }) + .attr('x', d => { + let translateRight = d.x + 1; + return `${translateRight}%`; + }); // style here? or in .css file groups.selectAll('.domain, .tick line').remove(); From 238d6ec54eee0400561a9cddcb85b6b0965e0f85 Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Fri, 20 Aug 2021 11:11:25 -0700 Subject: [PATCH 11/48] adds legend --- ui/app/styles/components/bar-chart.scss | 60 ++++++++----------- ui/lib/core/addon/components/bar-chart.js | 41 ++++++++++++- .../addon/templates/components/bar-chart.hbs | 11 ++-- 3 files changed, 69 insertions(+), 43 deletions(-) diff --git a/ui/app/styles/components/bar-chart.scss b/ui/app/styles/components/bar-chart.scss index 879c34d20de4e..40cd2f5f52633 100644 --- a/ui/app/styles/components/bar-chart.scss +++ b/ui/app/styles/components/bar-chart.scss @@ -1,21 +1,36 @@ -.bar-chart-container { - width: 751px; - height: 405px; +.bar-chart-div { border: 1px solid #dce0e6; border-radius: 4px; padding: 24px, 24px, 12px, 24px; > div.is-border { - border: 0.75px solid #dce0e6; - width: 703px; - margin: 5px 24px 0px 24px; + border: 0.3px solid #dce0e6; + width: 94%; + margin-left: 3%; } } +.chart-header { + margin: 24px 0px 0px 24px; +} + +.chart-title { + font-size: $size-5; + font-weight: $font-weight-bold; + line-height: normal; +} + +.chart-description { + font-size: $size-8; + font-weight: $font-weight-normal; + color: $ui-gray-700; + margin-bottom: 8px; +} + .bar-chart { width: 100%; height: 100%; - padding: 17px 24px 26px 24px; // pad here? or modify in js file? + padding: 17px 24px 20px 24px; .total-value { font-weight: $font-weight-normal; @@ -27,34 +42,9 @@ font-weight: $font-weight-semibold; font-size: $size-8; } - - rect { - rx: 3; - ry: 3; - } - - // style here? or in .js file - // line { - // visibility: hidden; - // } - - // .domain { - // visibility: hidden; - // } -} - -.chart-header { - margin: 24px 0px 0px 24px; -} - -.chart-title { - font-size: $size-5; - font-weight: $font-weight-bold; - line-height: normal; } -.chart-description { - font-size: $size-8; - font-weight: $font-weight-normal; - color: $ui-gray-700; +.legend { + width: 100%; + height: 100%; } diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index b641a85a5baf1..66d50c3f52c90 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -28,6 +28,9 @@ const CHART_MARGIN = { top: 10, right: 24, bottom: 26, left: 137 }; const BAR_COLORS = ['#BFD4FF', '#8AB1FF']; class BarChart extends Component { // make xValue and yValue consts? i.e. yValue = dataset.map(d => d.label) + variableA = 'Active Direct Tokens'; + variableB = 'Unique Entities'; + dataset = [ { label: 'top-namespace', count: 1212, unique: 300 }, { label: 'namespace2', count: 650, unique: 550 }, @@ -49,7 +52,7 @@ class BarChart extends Component { let xScale = scaleLinear() .domain([0, max(dataset, d => d.count + d.unique)]) // min and max values of dataset - .range([0, 70]); // range in percent (30% reserved for margins) + .range([0, 75]); // range in percent (30% reserved for margins) let yScale = scaleBand() .domain(dataset.map(d => d.label)) @@ -78,10 +81,14 @@ class BarChart extends Component { .data(d => d) .enter() .append('rect') - .attr('width', data => `${xScale(data[1] - data[0] - 10)}%`) + .attr('width', data => `${xScale(data[1] - data[0] - 6)}%`) .attr('height', yScale.bandwidth()) .attr('x', data => `${xScale(data[0])}%`) - .attr('y', ({ data }) => yScale(data.label)); + .attr('y', ({ data }) => yScale(data.label)) + .attr('rx', 3) + .attr('ry', 3); + + svg.attr('height', (dataset.length + 1) * 24); let totalNumbers = []; stackedData[1].forEach(e => { @@ -120,6 +127,34 @@ class BarChart extends Component { // style here? or in .css file groups.selectAll('.domain, .tick line').remove(); + + let legend = select('.legend'); + legend + .append('circle') + .attr('cx', '60%') + .attr('cy', '20%') + .attr('r', 6) + .style('fill', '#BFD4FF'); + legend + .append('text') + .attr('x', '62%') + .attr('y', '20%') + .text(`${this.variableA}`) + .style('font-size', '15px') + .attr('alignment-baseline', 'middle'); + legend + .append('circle') + .attr('cx', '83%') + .attr('cy', '20%') + .attr('r', 6) + .style('fill', '#8AB1FF'); + legend + .append('text') + .attr('x', '85%') + .attr('y', '20%') + .text(`${this.variableB}`) + .style('font-size', '15px') + .attr('alignment-baseline', 'middle'); } } diff --git a/ui/lib/core/addon/templates/components/bar-chart.hbs b/ui/lib/core/addon/templates/components/bar-chart.hbs index 276694c1df457..21ceea96f5df2 100644 --- a/ui/lib/core/addon/templates/components/bar-chart.hbs +++ b/ui/lib/core/addon/templates/components/bar-chart.hbs @@ -1,12 +1,13 @@ -



-
+

{{@title}}

{{@description}}

-
- {{!-- add conditional here to check for data --}} -
+
+
+ {{!-- add conditional here to check for data --}}
+
+
\ No newline at end of file From 3d96d6bd5c86b67373062d05711299fe8c464455 Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Fri, 20 Aug 2021 14:59:05 -0700 Subject: [PATCH 12/48] adds tooltip --- ui/app/styles/components/bar-chart.scss | 78 ++++++------- ui/lib/core/addon/components/bar-chart.js | 108 +++++++++++++----- .../addon/templates/components/bar-chart.hbs | 4 +- 3 files changed, 117 insertions(+), 73 deletions(-) diff --git a/ui/app/styles/components/bar-chart.scss b/ui/app/styles/components/bar-chart.scss index 40cd2f5f52633..636d66d730bf5 100644 --- a/ui/app/styles/components/bar-chart.scss +++ b/ui/app/styles/components/bar-chart.scss @@ -1,50 +1,48 @@ -.bar-chart-div { - border: 1px solid #dce0e6; - border-radius: 4px; - padding: 24px, 24px, 12px, 24px; - - > div.is-border { - border: 0.3px solid #dce0e6; - width: 94%; - margin-left: 3%; +.container { + display: grid; + + .bar-chart-div { + border: 1px solid #dce0e6; + border-radius: 4px; + padding: 24px, 24px, 12px, 24px; + + > div.is-border { + border: 0.3px solid #dce0e6; + width: 94%; + margin-left: 3%; + } } -} - -.chart-header { - margin: 24px 0px 0px 24px; -} -.chart-title { - font-size: $size-5; - font-weight: $font-weight-bold; - line-height: normal; -} - -.chart-description { - font-size: $size-8; - font-weight: $font-weight-normal; - color: $ui-gray-700; - margin-bottom: 8px; -} + .chart-header { + margin: 24px 0px 0px 24px; + } -.bar-chart { - width: 100%; - height: 100%; - padding: 17px 24px 20px 24px; + .chart-title { + font-size: $size-5; + font-weight: $font-weight-bold; + line-height: normal; + } - .total-value { - font-weight: $font-weight-normal; - color: $black; + .chart-description { font-size: $size-8; + font-weight: $font-weight-normal; + color: $ui-gray-700; + margin-bottom: 8px; } - .tick > text { - font-weight: $font-weight-semibold; - font-size: $size-8; + .bar-chart { + width: 100%; + height: 100%; + padding: 17px 24px 20px 24px; + + .tick > text { + font-weight: $font-weight-semibold; + font-size: $size-8; + } } -} -.legend { - width: 100%; - height: 100%; + .legend { + width: 100%; + height: 100%; + } } diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index 66d50c3f52c90..fbad20f07b267 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -15,41 +15,58 @@ import Component from '@glimmer/component'; import layout from '../templates/components/bar-chart'; import { setComponentTemplate } from '@ember/component'; import { action } from '@ember/object'; -import { select } from 'd3-selection'; +import { select, event } from 'd3-selection'; import { scaleLinear, scaleBand } from 'd3-scale'; import { max } from 'd3-array'; import { stack } from 'd3-shape'; import { axisLeft } from 'd3-axis'; +import { transition } from 'd3-transition'; import { format } from 'd3-format'; -const BAR_THICKNESS = 6; // bar thickness in pixels; -const BAR_SPACING = 20; // spacing between bars in pixels const CHART_MARGIN = { top: 10, right: 24, bottom: 26, left: 137 }; const BAR_COLORS = ['#BFD4FF', '#8AB1FF']; class BarChart extends Component { // make xValue and yValue consts? i.e. yValue = dataset.map(d => d.label) - variableA = 'Active Direct Tokens'; - variableB = 'Unique Entities'; + variableA = 'Active direct tokens'; + variableB = 'Unique entities'; dataset = [ - { label: 'top-namespace', count: 1212, unique: 300 }, - { label: 'namespace2', count: 650, unique: 550 }, - { label: 'longnamenamespace', count: 200, unique: 1000 }, - { label: 'anothernamespace', count: 400, unique: 550 }, - { label: 'namespacesomething', count: 400, unique: 400 }, - { label: 'namespace5', count: 800, unique: 300 }, - { label: 'namespace', count: 400, unique: 300 }, - { label: 'namespace999', count: 350, unique: 250 }, - { label: 'name-space', count: 450, unique: 200 }, - { label: 'path/to/namespace', count: 200, unique: 100 }, + { label: 'top-namespace', count: 1212, unique: 300, total: 1512 }, + { label: 'namespace2', count: 650, unique: 550, total: 1200 }, + { label: 'longnamenamespace', count: 200, unique: 1000, total: 1200 }, + { label: 'anothernamespace', count: 400, unique: 550, total: 1100 }, + { label: 'namespacesomething', count: 400, unique: 400, total: 950 }, + { label: 'namespace5', count: 800, unique: 300, total: 800 }, + { label: 'namespace', count: 400, unique: 300, total: 700 }, + { label: 'namespace999', count: 350, unique: 250, total: 650 }, + { label: 'name-space', count: 450, unique: 200, total: 600 }, + { label: 'path/to/namespace', count: 200, unique: 100, total: 300 }, ]; + totalCount = this.dataset.reduce((previousValue, currentValue) => previousValue + currentValue.count, 0); + totalUnique = this.dataset.reduce((previousValue, currentValue) => previousValue + currentValue.unique, 0); + totalActive = this.totalCount + this.totalUnique; + + createToolTipText(data) { + let total = data.reduce((prev, acc) => prev + acc, 0); + return `${total / this.totalActive}%`; + // console.log(percent) + } + @action renderBarChart(element) { let dataset = this.dataset.sort((a, b) => a.count + a.unique - (b.count + b.unique)).reverse(); + let totalActive = this.totalActive; let stackFunction = stack().keys(['count', 'unique']); let stackedData = stackFunction(dataset); // returns an array of coordinates for each rectangle group, first group is for counts (left), second for unique (right) + let container = select('.bar-chart-container'); + container.attr('viewBox', '0 0 751 405'); + container + .append('div') + .attr('class', 'chart-tooltip') + .attr('style', 'position: absolute; opacity: 0;'); + let xScale = scaleLinear() .domain([0, max(dataset, d => d.count + d.unique)]) // min and max values of dataset .range([0, 75]); // range in percent (30% reserved for margins) @@ -61,10 +78,11 @@ class BarChart extends Component { // it tells the scale the percent of the total width it should reserve for white space between bars .paddingInner(0.765); - let svg = select(element); - // add a group for each row of data + let chartSvg = select(element); + chartSvg.attr('height', (dataset.length + 1) * 24); - let groups = svg + // add a group for each row of data + let groups = chartSvg .selectAll('g') .data(stackedData) .enter() @@ -86,9 +104,37 @@ class BarChart extends Component { .attr('x', data => `${xScale(data[0])}%`) .attr('y', ({ data }) => yScale(data.label)) .attr('rx', 3) - .attr('ry', 3); - - svg.attr('height', (dataset.length + 1) * 24); + .attr('ry', 3) + .on('mouseover', function({ data }) { + select(this).attr('fill', '#1563FF'); + select('.chart-tooltip') + .transition() + .duration(200) + .style('opacity', 1) + .text( + ` + ${Math.round((data.total * 100) / totalActive)}% of total client counts: \n + ${data.unique} unique entities, ${data.count} active tokens. + ` + ) + .style('color', 'white') + .style('background', '#525761') + .style('max-width', '200px') + .style('font-size', '.929rem') + .style('padding', '10px') + .style('border-radius', '4px'); + }) + .on('mouseout', function(d) { + select('.chart-tooltip').style('opacity', 0); + select(this).attr('fill', function() { + d[0] === 0 ? `${BAR_COLORS[0]}` : `${BAR_COLORS[1]}`; + }); + }) + .on('mousemove', function() { + select('.chart-tooltip') + .style('left', `${event.pageX - 110}px`) + .style('top', `${event.pageY - 150}px`); + }); let totalNumbers = []; stackedData[1].forEach(e => { @@ -98,14 +144,12 @@ class BarChart extends Component { let textData = []; rects.each(function(d, i) { - // if (d[0] !== 0){ let textDatum = { text: totalNumbers[i], x: parseFloat(select(this).attr('width')) + parseFloat(select(this).attr('x')), y: parseFloat(select(this).attr('y')) + parseFloat(select(this).attr('height')), }; textData.push(textDatum); - // }; }); let text = groups @@ -116,6 +160,7 @@ class BarChart extends Component { .text(d => d.text) .attr('fill', '#000') .attr('class', 'total-value') + .style('font-size', '.8rem') .attr('text-anchor', 'start') .attr('y', d => { return `${d.y}`; @@ -125,35 +170,36 @@ class BarChart extends Component { return `${translateRight}%`; }); - // style here? or in .css file + // remove axes lines groups.selectAll('.domain, .tick line').remove(); - let legend = select('.legend'); - legend + let legendSvg = select('.legend'); + + legendSvg .append('circle') .attr('cx', '60%') .attr('cy', '20%') .attr('r', 6) .style('fill', '#BFD4FF'); - legend + legendSvg .append('text') .attr('x', '62%') .attr('y', '20%') .text(`${this.variableA}`) - .style('font-size', '15px') + .style('font-size', '.8rem') .attr('alignment-baseline', 'middle'); - legend + legendSvg .append('circle') .attr('cx', '83%') .attr('cy', '20%') .attr('r', 6) .style('fill', '#8AB1FF'); - legend + legendSvg .append('text') .attr('x', '85%') .attr('y', '20%') .text(`${this.variableB}`) - .style('font-size', '15px') + .style('font-size', '.8rem') .attr('alignment-baseline', 'middle'); } } diff --git a/ui/lib/core/addon/templates/components/bar-chart.hbs b/ui/lib/core/addon/templates/components/bar-chart.hbs index 21ceea96f5df2..0d66520bef5a5 100644 --- a/ui/lib/core/addon/templates/components/bar-chart.hbs +++ b/ui/lib/core/addon/templates/components/bar-chart.hbs @@ -3,11 +3,11 @@

{{@title}}

{{@description}}

-
+
{{!-- add conditional here to check for data --}}
-
\ No newline at end of file + From 9c7b764957d44e94cc69fdd3f483c106a267849a Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Fri, 20 Aug 2021 15:16:14 -0700 Subject: [PATCH 13/48] tweaks styling adds pointer cursor to rects --- ui/lib/core/addon/components/bar-chart.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index fbad20f07b267..03224d6645051 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -99,6 +99,7 @@ class BarChart extends Component { .data(d => d) .enter() .append('rect') + .style('cursor', 'pointer') .attr('width', data => `${xScale(data[1] - data[0] - 6)}%`) .attr('height', yScale.bandwidth()) .attr('x', data => `${xScale(data[0])}%`) @@ -133,7 +134,7 @@ class BarChart extends Component { .on('mousemove', function() { select('.chart-tooltip') .style('left', `${event.pageX - 110}px`) - .style('top', `${event.pageY - 150}px`); + .style('top', `${event.pageY - 145}px`); }); let totalNumbers = []; From 05a1619db7d7cbdb4fb4fb7804493b5778d6904b Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Mon, 23 Aug 2021 11:56:00 -0700 Subject: [PATCH 14/48] fixes tooltip placement --- ui/app/styles/components/bar-chart.scss | 83 ++++++++++--------- .../templates/vault/cluster/metrics/index.hbs | 79 +++++++++++++++++- ui/lib/core/addon/components/bar-chart.js | 20 ++--- .../addon/templates/components/bar-chart.hbs | 27 +++--- 4 files changed, 151 insertions(+), 58 deletions(-) diff --git a/ui/app/styles/components/bar-chart.scss b/ui/app/styles/components/bar-chart.scss index 636d66d730bf5..e5487f23a229e 100644 --- a/ui/app/styles/components/bar-chart.scss +++ b/ui/app/styles/components/bar-chart.scss @@ -1,48 +1,57 @@ -.container { +.test-container { display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: 1fr 3fr; +} +.bar-chart-div { + border: 1px solid #dce0e6; + border-radius: 4px; + padding: $spacing-l $spacing-l $spacing-s $spacing-l; + height: 100%; + width: 100%; + + > div.is-border { + border: 0.3px solid #dce0e6; + width: 94%; + margin-left: 3%; + } +} - .bar-chart-div { - border: 1px solid #dce0e6; - border-radius: 4px; - padding: 24px, 24px, 12px, 24px; +.chart-header { + margin: 24px 0px 0px 24px; +} - > div.is-border { - border: 0.3px solid #dce0e6; - width: 94%; - margin-left: 3%; - } - } +.chart-title { + font-size: $size-5; + font-weight: $font-weight-bold; + line-height: normal; +} - .chart-header { - margin: 24px 0px 0px 24px; - } +.chart-description { + font-size: $size-8; + font-weight: $font-weight-normal; + color: $ui-gray-700; + margin-bottom: $spacing-xs; +} - .chart-title { - font-size: $size-5; - font-weight: $font-weight-bold; - line-height: normal; - } +.bar-chart { + width: 100%; + padding: $spacing-m $spacing-l $spacing-m $spacing-l; - .chart-description { + .tick > text { + font-weight: $font-weight-semibold; font-size: $size-8; - font-weight: $font-weight-normal; - color: $ui-gray-700; - margin-bottom: 8px; } +} - .bar-chart { - width: 100%; - height: 100%; - padding: 17px 24px 20px 24px; - - .tick > text { - font-weight: $font-weight-semibold; - font-size: $size-8; - } - } +.legend-container { + display: flex; + align-items: center; + height: 30px; + margin-top: $spacing-s; +} - .legend { - width: 100%; - height: 100%; - } +.legend { + width: 100%; + height: 100%; } diff --git a/ui/app/templates/vault/cluster/metrics/index.hbs b/ui/app/templates/vault/cluster/metrics/index.hbs index 7456ba4c24624..2469bcd7c9c16 100644 --- a/ui/app/templates/vault/cluster/metrics/index.hbs +++ b/ui/app/templates/vault/cluster/metrics/index.hbs @@ -1,4 +1,81 @@ + + +

+ Metrics +

+ + \ No newline at end of file + @dataset={{this.testData}}/> +
+ +
+ +{{#if (eq model.config.queriesAvailable false)}} + {{#if (eq model.config.enabled "On")}} + + {{else}} + +

Go to configuration

+ + {{/if}} +{{else}} +
+ {{#if (eq model.config.enabled 'Off')}} + + This feature is currently disabled and data is not being collected. Edit the configuration to enable tracking again. + + {{/if}} +

The active clients metric contributes to billing. It is collected at the end of each month alongside unique entities and direct active tokens. The data below includes the current namespace and all its children.

+ + {{#unless model.activity.total}} + + {{else}} +
+ + + +
+ {{/unless}} +
+{{/if}} diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index 03224d6645051..37a7fbadbd443 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -23,7 +23,7 @@ import { axisLeft } from 'd3-axis'; import { transition } from 'd3-transition'; import { format } from 'd3-format'; -const CHART_MARGIN = { top: 10, right: 24, bottom: 26, left: 137 }; +const CHART_MARGIN = { top: 10, right: 24, bottom: 26, left: 137 }; // makes space for y-axis legend const BAR_COLORS = ['#BFD4FF', '#8AB1FF']; class BarChart extends Component { // make xValue and yValue consts? i.e. yValue = dataset.map(d => d.label) @@ -114,9 +114,9 @@ class BarChart extends Component { .style('opacity', 1) .text( ` - ${Math.round((data.total * 100) / totalActive)}% of total client counts: \n - ${data.unique} unique entities, ${data.count} active tokens. - ` + ${Math.round((data.total * 100) / totalActive)}% of total client counts: \n + ${data.unique} unique entities, ${data.count} active tokens. + ` ) .style('color', 'white') .style('background', '#525761') @@ -133,8 +133,8 @@ class BarChart extends Component { }) .on('mousemove', function() { select('.chart-tooltip') - .style('left', `${event.pageX - 110}px`) - .style('top', `${event.pageY - 145}px`); + .style('left', `${xScale(event.pageX - 150)}%`) + .style('top', `${event.pageY - 140}px`); }); let totalNumbers = []; @@ -179,26 +179,26 @@ class BarChart extends Component { legendSvg .append('circle') .attr('cx', '60%') - .attr('cy', '20%') + .attr('cy', '50%') .attr('r', 6) .style('fill', '#BFD4FF'); legendSvg .append('text') .attr('x', '62%') - .attr('y', '20%') + .attr('y', '50%') .text(`${this.variableA}`) .style('font-size', '.8rem') .attr('alignment-baseline', 'middle'); legendSvg .append('circle') .attr('cx', '83%') - .attr('cy', '20%') + .attr('cy', '50%') .attr('r', 6) .style('fill', '#8AB1FF'); legendSvg .append('text') .attr('x', '85%') - .attr('y', '20%') + .attr('y', '50%') .text(`${this.variableB}`) .style('font-size', '.8rem') .attr('alignment-baseline', 'middle'); diff --git a/ui/lib/core/addon/templates/components/bar-chart.hbs b/ui/lib/core/addon/templates/components/bar-chart.hbs index 0d66520bef5a5..95a5c7e36bc68 100644 --- a/ui/lib/core/addon/templates/components/bar-chart.hbs +++ b/ui/lib/core/addon/templates/components/bar-chart.hbs @@ -1,13 +1,20 @@ -
-
-

{{@title}}

-

{{@description}}

-
+
+
First Div
+
Second Div
+
+
+

{{@title}}

+

{{@description}}

+
+
+
+ {{!-- add conditional here to check for data --}} + +
-
- {{!-- add conditional here to check for data --}} - +
+ +
-
- +
Fourth Div
From b54fa3c3e70472fca44c0658bae3da67660e4c28 Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Mon, 23 Aug 2021 13:25:47 -0700 Subject: [PATCH 15/48] moves starget from bar to whole area --- .../templates/vault/cluster/metrics/index.hbs | 1 + ui/lib/core/addon/components/bar-chart.js | 109 ++++++++++++------ .../addon/templates/components/bar-chart.hbs | 3 +- 3 files changed, 77 insertions(+), 36 deletions(-) diff --git a/ui/app/templates/vault/cluster/metrics/index.hbs b/ui/app/templates/vault/cluster/metrics/index.hbs index 2469bcd7c9c16..aef25fa33dba9 100644 --- a/ui/app/templates/vault/cluster/metrics/index.hbs +++ b/ui/app/templates/vault/cluster/metrics/index.hbs @@ -9,6 +9,7 @@ @title="Top 10 namespaces" @description="Each namespace's client count includes clients in child namespaces." @dataset={{this.testData}}/> +



Fourth Div
-
+
+ \ No newline at end of file From e76666f8a30f40eee860cba88f57c792932ad753 Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Mon, 23 Aug 2021 15:29:25 -0700 Subject: [PATCH 16/48] finishes hover selection styling --- ui/app/styles/components/bar-chart.scss | 1 + ui/lib/core/addon/components/bar-chart.js | 90 +++++++++-------------- 2 files changed, 34 insertions(+), 57 deletions(-) diff --git a/ui/app/styles/components/bar-chart.scss b/ui/app/styles/components/bar-chart.scss index e5487f23a229e..f8870c3bd395b 100644 --- a/ui/app/styles/components/bar-chart.scss +++ b/ui/app/styles/components/bar-chart.scss @@ -35,6 +35,7 @@ } .bar-chart { + height: 70%; width: 100%; padding: $spacing-m $spacing-l $spacing-m $spacing-l; diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index c5fd2e51aae25..99961fc671a2f 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -15,7 +15,7 @@ import Component from '@glimmer/component'; import layout from '../templates/components/bar-chart'; import { setComponentTemplate } from '@ember/component'; import { action } from '@ember/object'; -import { select, event } from 'd3-selection'; +import { select, event, selection } from 'd3-selection'; import { scaleLinear, scaleBand } from 'd3-scale'; import { max } from 'd3-array'; import { stack } from 'd3-shape'; @@ -24,7 +24,8 @@ import { transition } from 'd3-transition'; import { format } from 'd3-format'; const CHART_MARGIN = { top: 10, right: 24, bottom: 26, left: 137 }; // makes space for y-axis legend -const BAR_COLORS = ['#BFD4FF', '#8AB1FF']; +const BAR_COLORS_UNSELECTED = ['#BFD4FF', '#8AB1FF']; +const BAR_COLORS_SELECTED = ['#1563FF', '#0F4FD1']; class BarChart extends Component { // make xValue and yValue consts? i.e. yValue = dataset.map(d => d.label) variableA = 'Active direct tokens'; @@ -34,8 +35,8 @@ class BarChart extends Component { { label: 'top-namespace', count: 1212, unique: 300, total: 1512 }, { label: 'namespace2', count: 650, unique: 550, total: 1200 }, { label: 'longnamenamespace', count: 200, unique: 1000, total: 1200 }, - { label: 'anothernamespace', count: 400, unique: 550, total: 1100 }, { label: 'namespacesomething', count: 400, unique: 400, total: 950 }, + { label: 'anothernamespace', count: 400, unique: 550, total: 1100 }, { label: 'namespace5', count: 800, unique: 300, total: 800 }, { label: 'namespace', count: 400, unique: 300, total: 700 }, { label: 'namespace999', count: 350, unique: 250, total: 650 }, @@ -47,11 +48,6 @@ class BarChart extends Component { totalUnique = this.dataset.reduce((previousValue, currentValue) => previousValue + currentValue.unique, 0); totalActive = this.totalCount + this.totalUnique; - createToolTipText(data) { - let total = data.reduce((prev, acc) => prev + acc, 0); - return `${total / this.totalActive}%`; - } - @action renderBarChart(element) { let dataset = this.dataset.sort((a, b) => a.count + a.unique - (b.count + b.unique)).reverse(); @@ -86,6 +82,7 @@ class BarChart extends Component { let chartSvg = select(element); chartSvg.attr('height', (dataset.length + 1) * 24); + // append background bars first so behind data bars let backgroundBars = chartSvg .selectAll('.background-bar') .data(dataset) @@ -98,32 +95,36 @@ class BarChart extends Component { .attr('x', '0') .attr('y', ({ label }) => yScale(label)) .style('fill', '#EBEEF2') - .style('opacity', '0') + .style('opacity', '0'); + + backgroundBars .on('mouseover', function(data) { select(this).style('opacity', 1); + let bars = chartSvg.selectAll('rect.data-bar').filter(function() { + return select(this).attr('y') === `${event.target.getAttribute('y')}`; + }); + bars.style('fill', (b, i) => `${BAR_COLORS_SELECTED[i]}`); + // TOOLTIP TEXT: select('.chart-tooltip') .transition() .duration(200) - .style('opacity', 1) - // TOOLTIP TEXT: - .text( - ` - ${Math.round((data.total * 100) / totalActive)}% of total client counts: \n - ${data.unique} unique entities, ${data.count} active tokens. - ` - ); + .style('opacity', 1).text(` + ${Math.round((data.total * 100) / totalActive)}% of total client counts: \n + ${data.unique} unique entities, ${data.count} active tokens. + `); }) - .on('mouseout', function(d) { + .on('mouseout', function() { select(this).style('opacity', 0); - select('.chart-tooltip').style('opacity', 0); - select(this).attr('fill', function() { - d[0] === 0 ? `${BAR_COLORS[0]}` : `${BAR_COLORS[1]}`; + let bars = event.relatedTarget.querySelectorAll(`g > [y="${this.getAttribute('y')}"]`); + bars.forEach((bar, i) => { + select(bar).style('fill', `${BAR_COLORS_UNSELECTED[i]}`); }); + select('.chart-tooltip').style('opacity', 0); }) .on('mousemove', function() { select('.chart-tooltip') - .style('left', `${xScale(event.pageX - 150)}%`) - .style('top', `${event.pageY - 140}px`); + .style('left', `${xScale(event.pageX + 20)}%`) + .style('top', `${event.pageY - 145}px`); }); // add a group for each array of stackedData @@ -133,7 +134,7 @@ class BarChart extends Component { .enter() .append('g') .attr('transform', `translate(${CHART_MARGIN.left}, ${CHART_MARGIN.top})`) - .style('fill', (d, i) => BAR_COLORS[i]); + .style('fill', (d, i) => BAR_COLORS_UNSELECTED[i]); // yAxis legend let yAxis = axisLeft(yScale); @@ -144,37 +145,14 @@ class BarChart extends Component { .data(d => d) .enter() .append('rect') + .attr('class', 'data-bar') + .style('cursor', 'pointer') .attr('width', data => `${xScale(data[1] - data[0] - 6)}%`) .attr('height', yScale.bandwidth()) .attr('x', data => `${xScale(data[0])}%`) .attr('y', ({ data }) => yScale(data.label)) .attr('rx', 3) .attr('ry', 3); - // .on('mouseover', function({ data }) { - // select(this).attr('fill', '#1563FF'); - // select('.chart-tooltip') - // .transition() - // .duration(200) - // .style('opacity', 1) - // // TOOLTIP TEXT: - // .text( - // ` - // ${Math.round((data.total * 100) / totalActive)}% of total client counts: \n - // ${data.unique} unique entities, ${data.count} active tokens. - // ` - // ) - // }) - // .on('mouseout', function(d) { - // select('.chart-tooltip').style('opacity', 0); - // select(this).attr('fill', function() { - // d[0] === 0 ? `${BAR_COLORS[0]}` : `${BAR_COLORS[1]}`; - // }); - // }) - // .on('mousemove', function() { - // select('.chart-tooltip') - // .style('left', `${xScale(event.pageX - 150)}%`) - // .style('top', `${event.pageY - 140}px`); - // }); let totalNumbers = []; stackedData[1].forEach(e => { @@ -182,19 +160,19 @@ class BarChart extends Component { totalNumbers.push(n); }); - let textData = []; + let totalCountText = []; rects.each(function(d, i) { let textDatum = { text: totalNumbers[i], x: parseFloat(select(this).attr('width')) + parseFloat(select(this).attr('x')), y: parseFloat(select(this).attr('y')) + parseFloat(select(this).attr('height')), }; - textData.push(textDatum); + totalCountText.push(textDatum); }); let text = groups .selectAll('text') - .data(textData) + .data(totalCountText) .enter() .append('text') .text(d => d.text) @@ -202,12 +180,10 @@ class BarChart extends Component { .attr('class', 'total-value') .style('font-size', '.8rem') .attr('text-anchor', 'start') - .attr('y', d => { - return `${d.y}`; - }) + .attr('y', d => `${d.y}`) .attr('x', d => { - let translateRight = d.x + 1; - return `${translateRight}%`; + // let translateRight = d.x + 1; + return `${d.x + 1}%`; }); // remove axes lines From 45f819255a423810b88470b16c151035e100a372 Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Mon, 23 Aug 2021 15:44:43 -0700 Subject: [PATCH 17/48] cleans up --- ui/app/styles/components/bar-chart.scss | 2 +- ui/lib/core/addon/components/bar-chart.js | 26 +++++++++---------- .../addon/templates/components/bar-chart.hbs | 3 +-- 3 files changed, 14 insertions(+), 17 deletions(-) diff --git a/ui/app/styles/components/bar-chart.scss b/ui/app/styles/components/bar-chart.scss index f8870c3bd395b..56725448403ae 100644 --- a/ui/app/styles/components/bar-chart.scss +++ b/ui/app/styles/components/bar-chart.scss @@ -3,7 +3,7 @@ grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 3fr; } -.bar-chart-div { +.bar-chart-wrapper { border: 1px solid #dce0e6; border-radius: 4px; padding: $spacing-l $spacing-l $spacing-s $spacing-l; diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index 99961fc671a2f..24de149710392 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -55,8 +55,8 @@ class BarChart extends Component { let stackFunction = stack().keys(['count', 'unique']); let stackedData = stackFunction(dataset); // returns an array of coordinates for each rectangle group, first group is for counts (left), second for unique (right) let container = select('.bar-chart-container'); - // container.attr('viewBox', '0 0 751 405'); + // creates and appends tooltip container .append('div') .attr('class', 'chart-tooltip') @@ -74,7 +74,8 @@ class BarChart extends Component { let yScale = scaleBand() .domain(dataset.map(d => d.label)) - .range([0, dataset.length * 24]) // each bar element has a thickness (bar + padding) of 24 pixels + // each bar element (bar + padding) has a thickness of 24 pixels + .range([0, dataset.length * 24]) // paddingInner takes a number between 0 and 1 // it tells the scale the percent of the total width it should reserve for white space between bars .paddingInner(0.765); @@ -82,7 +83,7 @@ class BarChart extends Component { let chartSvg = select(element); chartSvg.attr('height', (dataset.length + 1) * 24); - // append background bars first so behind data bars + // must append background bars first so they are behind data bars let backgroundBars = chartSvg .selectAll('.background-bar') .data(dataset) @@ -109,16 +110,16 @@ class BarChart extends Component { .transition() .duration(200) .style('opacity', 1).text(` - ${Math.round((data.total * 100) / totalActive)}% of total client counts: \n - ${data.unique} unique entities, ${data.count} active tokens. - `); + ${Math.round((data.total * 100) / totalActive)}% of total client counts: \n + ${data.unique} unique entities, ${data.count} active tokens. + `); }) .on('mouseout', function() { select(this).style('opacity', 0); - let bars = event.relatedTarget.querySelectorAll(`g > [y="${this.getAttribute('y')}"]`); - bars.forEach((bar, i) => { - select(bar).style('fill', `${BAR_COLORS_UNSELECTED[i]}`); + let bars = chartSvg.selectAll('rect.data-bar').filter(function() { + return select(this).attr('y') === `${event.target.getAttribute('y')}`; }); + bars.style('fill', (b, i) => `${BAR_COLORS_UNSELECTED[i]}`); select('.chart-tooltip').style('opacity', 0); }) .on('mousemove', function() { @@ -170,7 +171,7 @@ class BarChart extends Component { totalCountText.push(textDatum); }); - let text = groups + groups .selectAll('text') .data(totalCountText) .enter() @@ -181,10 +182,7 @@ class BarChart extends Component { .style('font-size', '.8rem') .attr('text-anchor', 'start') .attr('y', d => `${d.y}`) - .attr('x', d => { - // let translateRight = d.x + 1; - return `${d.x + 1}%`; - }); + .attr('x', d => `${d.x + 1}%`); // remove axes lines groups.selectAll('.domain, .tick line').remove(); diff --git a/ui/lib/core/addon/templates/components/bar-chart.hbs b/ui/lib/core/addon/templates/components/bar-chart.hbs index 27f1c8f437b34..1f97b7bc629ff 100644 --- a/ui/lib/core/addon/templates/components/bar-chart.hbs +++ b/ui/lib/core/addon/templates/components/bar-chart.hbs @@ -1,7 +1,7 @@
First Div
Second Div
-
+

{{@title}}

{{@description}}

@@ -17,5 +17,4 @@
Fourth Div
-
\ No newline at end of file From 50dec448528c89d03f415b98373759e9f09a129d Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Mon, 23 Aug 2021 16:10:32 -0700 Subject: [PATCH 18/48] cleans up a tiny bit --- ui/lib/core/addon/components/bar-chart.js | 23 ++++++++++--------- .../addon/templates/components/bar-chart.hbs | 2 +- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index 24de149710392..3e20a0bcacbf8 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -15,7 +15,7 @@ import Component from '@glimmer/component'; import layout from '../templates/components/bar-chart'; import { setComponentTemplate } from '@ember/component'; import { action } from '@ember/object'; -import { select, event, selection } from 'd3-selection'; +import { select, event, selection, selectAll } from 'd3-selection'; import { scaleLinear, scaleBand } from 'd3-scale'; import { max } from 'd3-array'; import { stack } from 'd3-shape'; @@ -53,7 +53,7 @@ class BarChart extends Component { let dataset = this.dataset.sort((a, b) => a.count + a.unique - (b.count + b.unique)).reverse(); let totalActive = this.totalActive; let stackFunction = stack().keys(['count', 'unique']); - let stackedData = stackFunction(dataset); // returns an array of coordinates for each rectangle group, first group is for counts (left), second for unique (right) + let stackedData = stackFunction(dataset); // returns an array of coordinates for each group of rectangles, first group is for counts (left), second for unique (right) let container = select('.bar-chart-container'); // creates and appends tooltip @@ -69,8 +69,8 @@ class BarChart extends Component { .style('border-radius', '4px'); let xScale = scaleLinear() - .domain([0, max(dataset, d => d.count + d.unique)]) // min and max values of dataset - .range([0, 75]); // range in percent (30% reserved for margins) + .domain([0, max(dataset, d => d.count + d.unique)]) + .range([0, 70]); // 30% reserved for margins let yScale = scaleBand() .domain(dataset.map(d => d.label)) @@ -98,6 +98,7 @@ class BarChart extends Component { .style('fill', '#EBEEF2') .style('opacity', '0'); + // MOUSE EVENT TO HIGHLIGHT BARS backgroundBars .on('mouseover', function(data) { select(this).style('opacity', 1); @@ -128,16 +129,16 @@ class BarChart extends Component { .style('top', `${event.pageY - 145}px`); }); - // add a group for each array of stackedData + // creates group for each array of stackedData let groups = chartSvg .selectAll('g') .data(stackedData) .enter() .append('g') + // shifts chart to accommodate y-axis legend .attr('transform', `translate(${CHART_MARGIN.left}, ${CHART_MARGIN.top})`) .style('fill', (d, i) => BAR_COLORS_UNSELECTED[i]); - // yAxis legend let yAxis = axisLeft(yScale); yAxis(groups.append('g')); @@ -155,25 +156,26 @@ class BarChart extends Component { .attr('rx', 3) .attr('ry', 3); + // TO DO: fix this inflexible business let totalNumbers = []; stackedData[1].forEach(e => { let n = e[1]; totalNumbers.push(n); }); - let totalCountText = []; + let totalCountData = []; rects.each(function(d, i) { let textDatum = { text: totalNumbers[i], x: parseFloat(select(this).attr('width')) + parseFloat(select(this).attr('x')), y: parseFloat(select(this).attr('y')) + parseFloat(select(this).attr('height')), }; - totalCountText.push(textDatum); + totalCountData.push(textDatum); }); groups .selectAll('text') - .data(totalCountText) + .data(totalCountData) .enter() .append('text') .text(d => d.text) @@ -184,11 +186,10 @@ class BarChart extends Component { .attr('y', d => `${d.y}`) .attr('x', d => `${d.x + 1}%`); - // remove axes lines + // removes axes lines groups.selectAll('.domain, .tick line').remove(); let legendSvg = select('.legend'); - legendSvg .append('circle') .attr('cx', '60%') diff --git a/ui/lib/core/addon/templates/components/bar-chart.hbs b/ui/lib/core/addon/templates/components/bar-chart.hbs index 1f97b7bc629ff..fca2dc9a5927f 100644 --- a/ui/lib/core/addon/templates/components/bar-chart.hbs +++ b/ui/lib/core/addon/templates/components/bar-chart.hbs @@ -17,4 +17,4 @@
Fourth Div
- \ No newline at end of file + From f747f892db6bafccda4900451ce7822b1cb8a93c Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Mon, 23 Aug 2021 16:36:43 -0700 Subject: [PATCH 19/48] stopping point --- ui/lib/core/addon/components/bar-chart.js | 45 +++++++++++++++++++++-- 1 file changed, 41 insertions(+), 4 deletions(-) diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index 3e20a0bcacbf8..4e9b19edd11f6 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -102,10 +102,10 @@ class BarChart extends Component { backgroundBars .on('mouseover', function(data) { select(this).style('opacity', 1); - let bars = chartSvg.selectAll('rect.data-bar').filter(function() { + let dataBars = chartSvg.selectAll('rect.data-bar').filter(function() { return select(this).attr('y') === `${event.target.getAttribute('y')}`; }); - bars.style('fill', (b, i) => `${BAR_COLORS_SELECTED[i]}`); + dataBars.style('fill', (b, i) => `${BAR_COLORS_SELECTED[i]}`); // TOOLTIP TEXT: select('.chart-tooltip') .transition() @@ -117,10 +117,10 @@ class BarChart extends Component { }) .on('mouseout', function() { select(this).style('opacity', 0); - let bars = chartSvg.selectAll('rect.data-bar').filter(function() { + let dataBars = chartSvg.selectAll('rect.data-bar').filter(function() { return select(this).attr('y') === `${event.target.getAttribute('y')}`; }); - bars.style('fill', (b, i) => `${BAR_COLORS_UNSELECTED[i]}`); + dataBars.style('fill', (b, i) => `${BAR_COLORS_UNSELECTED[i]}`); select('.chart-tooltip').style('opacity', 0); }) .on('mousemove', function() { @@ -156,6 +156,43 @@ class BarChart extends Component { .attr('rx', 3) .attr('ry', 3); + // MOUSE EVENT TO HIGHLIGHT BARS + rects + .on('mouseover', function({ data }) { + let dataBars = chartSvg.selectAll('rect.data-bar').filter(function() { + return select(this).attr('y') === `${event.target.getAttribute('y')}`; + }); + dataBars.style('fill', (b, i) => `${BAR_COLORS_SELECTED[i]}`); + let backgroundBar = chartSvg.selectAll('rect.background-bar').filter(function() { + return select(this).attr('y') === `${event.target.getAttribute('y')}`; + }); + backgroundBar.style('opacity', 1); + // TOOLTIP TEXT: + select('.chart-tooltip') + .transition() + .duration(200) + .style('opacity', 1).text(` + ${Math.round((data.total * 100) / totalActive)}% of total client counts: \n + ${data.unique} unique entities, ${data.count} active tokens. + `); + }) + .on('mouseout', function() { + let dataBars = chartSvg.selectAll('rect.data-bar').filter(function() { + return select(this).attr('y') === `${event.target.getAttribute('y')}`; + }); + dataBars.style('fill', (b, i) => `${BAR_COLORS_UNSELECTED[i]}`); + let backgroundBar = chartSvg.selectAll('rect.background-bar').filter(function() { + return select(this).attr('y') === `${event.target.getAttribute('y')}`; + }); + backgroundBar.style('opacity', 1); + select('.chart-tooltip').style('opacity', 0); + }) + .on('mousemove', function() { + select('.chart-tooltip') + .style('left', `${xScale(event.pageX + 20)}%`) + .style('top', `${event.pageY - 145}px`); + }); + // TO DO: fix this inflexible business let totalNumbers = []; stackedData[1].forEach(e => { From 655cf014dcdbdbc7cd1dadc3367bd2b4024bf1b7 Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Tue, 24 Aug 2021 08:25:43 -0700 Subject: [PATCH 20/48] adjusts tooltip placemnt --- ui/lib/core/addon/components/bar-chart.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index 4e9b19edd11f6..5693961aa94cf 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -98,7 +98,7 @@ class BarChart extends Component { .style('fill', '#EBEEF2') .style('opacity', '0'); - // MOUSE EVENT TO HIGHLIGHT BARS + // BACKGROUND BAR MOUSEOVER EVENT backgroundBars .on('mouseover', function(data) { select(this).style('opacity', 1); @@ -125,8 +125,8 @@ class BarChart extends Component { }) .on('mousemove', function() { select('.chart-tooltip') - .style('left', `${xScale(event.pageX + 20)}%`) - .style('top', `${event.pageY - 145}px`); + .style('left', `${xScale(event.pageX - 200)}%`) + .style('top', `${event.pageY - 143}px`); }); // creates group for each array of stackedData @@ -156,7 +156,7 @@ class BarChart extends Component { .attr('rx', 3) .attr('ry', 3); - // MOUSE EVENT TO HIGHLIGHT BARS + // THIN RECTANGLE MOUSEOVER EVENT rects .on('mouseover', function({ data }) { let dataBars = chartSvg.selectAll('rect.data-bar').filter(function() { @@ -189,8 +189,8 @@ class BarChart extends Component { }) .on('mousemove', function() { select('.chart-tooltip') - .style('left', `${xScale(event.pageX + 20)}%`) - .style('top', `${event.pageY - 145}px`); + .style('left', `${xScale(event.pageX - 200)}%`) + .style('top', `${event.pageY - 143}px`); }); // TO DO: fix this inflexible business From addc811f51dd933e080784557cb1f5851e13e909 Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Tue, 24 Aug 2021 15:55:53 -0700 Subject: [PATCH 21/48] WIP//clean up time --- ui/app/styles/components/bar-chart.scss | 15 +- ui/config/environment.js | 6 +- ui/lib/core/addon/components/bar-chart.js | 201 +++++++++++----------- 3 files changed, 113 insertions(+), 109 deletions(-) diff --git a/ui/app/styles/components/bar-chart.scss b/ui/app/styles/components/bar-chart.scss index 56725448403ae..3d1ee85e39b4b 100644 --- a/ui/app/styles/components/bar-chart.scss +++ b/ui/app/styles/components/bar-chart.scss @@ -14,11 +14,12 @@ border: 0.3px solid #dce0e6; width: 94%; margin-left: 3%; + margin-bottom: $spacing-xxs; } } .chart-header { - margin: 24px 0px 0px 24px; + margin-left: $spacing-l; } .chart-title { @@ -34,11 +35,11 @@ margin-bottom: $spacing-xs; } -.bar-chart { - height: 70%; - width: 100%; +.bar-chart-container { padding: $spacing-m $spacing-l $spacing-m $spacing-l; +} +.bar-chart { .tick > text { font-weight: $font-weight-semibold; font-size: $size-8; @@ -46,10 +47,8 @@ } .legend-container { - display: flex; - align-items: center; - height: 30px; - margin-top: $spacing-s; + height: $spacing-l; + margin-top: $spacing-xs; } .legend { diff --git a/ui/config/environment.js b/ui/config/environment.js index 5e1fa3667889f..aaf5c4f31b789 100644 --- a/ui/config/environment.js +++ b/ui/config/environment.js @@ -45,9 +45,9 @@ module.exports = function(environment) { ENV.APP.LOG_TRANSITIONS = true; // ENV.APP.LOG_TRANSITIONS_INTERNAL = true; // ENV.APP.LOG_VIEW_LOOKUPS = true; - // ENV['ember-cli-mirage'] = { - // enabled: true, - // }; + ENV['ember-cli-mirage'] = { + enabled: true, + }; } if (environment === 'test') { diff --git a/ui/lib/core/addon/components/bar-chart.js b/ui/lib/core/addon/components/bar-chart.js index 5693961aa94cf..6d7f3ea7f0b21 100644 --- a/ui/lib/core/addon/components/bar-chart.js +++ b/ui/lib/core/addon/components/bar-chart.js @@ -4,7 +4,7 @@ * * @example * ```js - * + * * ``` * @param {object} requiredParam - requiredParam is... * @param {string} [optionalParam] - optionalParam is... @@ -20,16 +20,58 @@ import { scaleLinear, scaleBand } from 'd3-scale'; import { max } from 'd3-array'; import { stack } from 'd3-shape'; import { axisLeft } from 'd3-axis'; -import { transition } from 'd3-transition'; -import { format } from 'd3-format'; const CHART_MARGIN = { top: 10, right: 24, bottom: 26, left: 137 }; // makes space for y-axis legend const BAR_COLORS_UNSELECTED = ['#BFD4FF', '#8AB1FF']; const BAR_COLORS_SELECTED = ['#1563FF', '#0F4FD1']; class BarChart extends Component { - // make xValue and yValue consts? i.e. yValue = dataset.map(d => d.label) + // TODO: make xValue and yValue consts? i.e. yValue = dataset.map(d => d.label) variableA = 'Active direct tokens'; variableB = 'Unique entities'; + mapKey = [{ key: 'count', label: 'Active direct tokens' }, { key: 'unique', label: 'Unique entities' }]; + // can pass in @labelKey but default will be 'label' + get labelKey() { + return this.args.labelKey || 'label'; + } + + realData = [ + { + namespace_id: 'root', + namespace_path: '', + counts: { + distinct_entities: 268, + non_entity_tokens: 985, + clients: 1253, + }, + }, + { + namespace_id: 'O0i4m', + namespace_path: 'admin/', + counts: { + distinct_entities: 648, + non_entity_tokens: 220, + clients: 868, + }, + }, + { + namespace_id: '1oihz', + namespace_path: 'ns1/', + counts: { + distinct_entities: 547, + non_entity_tokens: 337, + clients: 884, + }, + }, + { + namespace_id: '1oihz', + namespace_path: 'ns1/', + counts: { + distinct_entities: 8078, + non_entity_tokens: 5349, + clients: 13427, + }, + }, + ]; dataset = [ { label: 'top-namespace', count: 1212, unique: 300, total: 1512 }, @@ -52,10 +94,12 @@ class BarChart extends Component { renderBarChart(element) { let dataset = this.dataset.sort((a, b) => a.count + a.unique - (b.count + b.unique)).reverse(); let totalActive = this.totalActive; - let stackFunction = stack().keys(['count', 'unique']); + let stackFunction = stack().keys(this.mapKey.map(l => l.key)); let stackedData = stackFunction(dataset); // returns an array of coordinates for each group of rectangles, first group is for counts (left), second for unique (right) let container = select('.bar-chart-container'); - + let handleClick = this.args.onClick; + let keys = this.mapKey.map(e => e.key); + let labelKey = this.labelKey; // creates and appends tooltip container .append('div') @@ -69,11 +113,11 @@ class BarChart extends Component { .style('border-radius', '4px'); let xScale = scaleLinear() - .domain([0, max(dataset, d => d.count + d.unique)]) - .range([0, 70]); // 30% reserved for margins + .domain([0, max(dataset, d => keys.reduce((prevValue, currValue) => prevValue + d[currValue], 0))]) + .range([0, 75]); // 25% reserved for margins let yScale = scaleBand() - .domain(dataset.map(d => d.label)) + .domain(dataset.map(d => d[labelKey])) // each bar element (bar + padding) has a thickness of 24 pixels .range([0, dataset.length * 24]) // paddingInner takes a number between 0 and 1 @@ -81,53 +125,7 @@ class BarChart extends Component { .paddingInner(0.765); let chartSvg = select(element); - chartSvg.attr('height', (dataset.length + 1) * 24); - - // must append background bars first so they are behind data bars - let backgroundBars = chartSvg - .selectAll('.background-bar') - .data(dataset) - .enter() - .append('rect') - .style('cursor', 'pointer') - .attr('class', 'background-bar') - .attr('width', '100%') - .attr('height', '24px') - .attr('x', '0') - .attr('y', ({ label }) => yScale(label)) - .style('fill', '#EBEEF2') - .style('opacity', '0'); - - // BACKGROUND BAR MOUSEOVER EVENT - backgroundBars - .on('mouseover', function(data) { - select(this).style('opacity', 1); - let dataBars = chartSvg.selectAll('rect.data-bar').filter(function() { - return select(this).attr('y') === `${event.target.getAttribute('y')}`; - }); - dataBars.style('fill', (b, i) => `${BAR_COLORS_SELECTED[i]}`); - // TOOLTIP TEXT: - select('.chart-tooltip') - .transition() - .duration(200) - .style('opacity', 1).text(` - ${Math.round((data.total * 100) / totalActive)}% of total client counts: \n - ${data.unique} unique entities, ${data.count} active tokens. - `); - }) - .on('mouseout', function() { - select(this).style('opacity', 0); - let dataBars = chartSvg.selectAll('rect.data-bar').filter(function() { - return select(this).attr('y') === `${event.target.getAttribute('y')}`; - }); - dataBars.style('fill', (b, i) => `${BAR_COLORS_UNSELECTED[i]}`); - select('.chart-tooltip').style('opacity', 0); - }) - .on('mousemove', function() { - select('.chart-tooltip') - .style('left', `${xScale(event.pageX - 200)}%`) - .style('top', `${event.pageY - 143}px`); - }); + chartSvg.attr('viewBox', `0 0 710 ${(dataset.length + 1) * 24}`); // creates group for each array of stackedData let groups = chartSvg @@ -152,22 +150,39 @@ class BarChart extends Component { .attr('width', data => `${xScale(data[1] - data[0] - 6)}%`) .attr('height', yScale.bandwidth()) .attr('x', data => `${xScale(data[0])}%`) - .attr('y', ({ data }) => yScale(data.label)) + .attr('y', ({ data }) => yScale(data[labelKey])) .attr('rx', 3) - .attr('ry', 3); + .attr('ry', 3) + .attr('border', 1); + + let actionBars = chartSvg + .selectAll('.foreground-bar') + .data(dataset) + .enter() + .append('rect') + .style('cursor', 'pointer') + .attr('class', 'foreground-bar') + .attr('width', '100%') + .attr('height', '24px') + .attr('x', '0') + .attr('y', ({ label }) => yScale(label)) + .style('fill', '#EBEEF2') + .style('opacity', '0') + .style('mix-blend-mode', 'multiply'); - // THIN RECTANGLE MOUSEOVER EVENT - rects - .on('mouseover', function({ data }) { + actionBars + .on('click', function(barData) { + if (handleClick) { + handleClick(barData); + } + }) + .on('mouseover', function(data) { + select(this).style('opacity', 1); let dataBars = chartSvg.selectAll('rect.data-bar').filter(function() { return select(this).attr('y') === `${event.target.getAttribute('y')}`; }); dataBars.style('fill', (b, i) => `${BAR_COLORS_SELECTED[i]}`); - let backgroundBar = chartSvg.selectAll('rect.background-bar').filter(function() { - return select(this).attr('y') === `${event.target.getAttribute('y')}`; - }); - backgroundBar.style('opacity', 1); - // TOOLTIP TEXT: + // FUTURE TODO: Make tooltip text a function select('.chart-tooltip') .transition() .duration(200) @@ -177,23 +192,20 @@ class BarChart extends Component { `); }) .on('mouseout', function() { + select(this).style('opacity', 0); let dataBars = chartSvg.selectAll('rect.data-bar').filter(function() { return select(this).attr('y') === `${event.target.getAttribute('y')}`; }); dataBars.style('fill', (b, i) => `${BAR_COLORS_UNSELECTED[i]}`); - let backgroundBar = chartSvg.selectAll('rect.background-bar').filter(function() { - return select(this).attr('y') === `${event.target.getAttribute('y')}`; - }); - backgroundBar.style('opacity', 1); select('.chart-tooltip').style('opacity', 0); }) .on('mousemove', function() { select('.chart-tooltip') - .style('left', `${xScale(event.pageX - 200)}%`) + .style('left', `${event.pageX - 30}px`) .style('top', `${event.pageY - 143}px`); }); - // TO DO: fix this inflexible business + // TODO: fix this inflexible business let totalNumbers = []; stackedData[1].forEach(e => { let n = e[1]; @@ -226,33 +238,26 @@ class BarChart extends Component { // removes axes lines groups.selectAll('.domain, .tick line').remove(); + // TODO: y needs to change when move onto another line + // 20% of map key is reserved for each symbol + label, calculates starting x coord + let startingXCoordinate = 100 - this.mapKey.length * 20; let legendSvg = select('.legend'); - legendSvg - .append('circle') - .attr('cx', '60%') - .attr('cy', '50%') - .attr('r', 6) - .style('fill', '#BFD4FF'); - legendSvg - .append('text') - .attr('x', '62%') - .attr('y', '50%') - .text(`${this.variableA}`) - .style('font-size', '.8rem') - .attr('alignment-baseline', 'middle'); - legendSvg - .append('circle') - .attr('cx', '83%') - .attr('cy', '50%') - .attr('r', 6) - .style('fill', '#8AB1FF'); - legendSvg - .append('text') - .attr('x', '85%') - .attr('y', '50%') - .text(`${this.variableB}`) - .style('font-size', '.8rem') - .attr('alignment-baseline', 'middle'); + this.mapKey.map((v, i) => { + let xCoordinate = startingXCoordinate + i * 20; + legendSvg + .append('circle') + .attr('cx', `${xCoordinate}%`) + .attr('cy', '50%') + .attr('r', 6) + .style('fill', `${BAR_COLORS_UNSELECTED[i]}`); + legendSvg + .append('text') + .attr('x', `${xCoordinate + 2}%`) + .attr('y', '50%') + .text(`${v.label}`) + .style('font-size', '.8rem') + .attr('alignment-baseline', 'middle'); + }); } } From 64a1d90518c86a0ead20f392161889229921c6d8 Mon Sep 17 00:00:00 2001 From: Claire Bontempo Date: Wed, 25 Aug 2021 12:41:45 -0700 Subject: [PATCH 22/48] sort of not broken --- .../templates/vault/cluster/metrics/index.hbs | 5 +- ui/config/environment.js | 6 +- ui/lib/core/addon/components/bar-chart.js | 109 ++++++++++++------ 3 files changed, 79 insertions(+), 41 deletions(-) diff --git a/ui/app/templates/vault/cluster/metrics/index.hbs b/ui/app/templates/vault/cluster/metrics/index.hbs index aef25fa33dba9..f174d33ddf31b 100644 --- a/ui/app/templates/vault/cluster/metrics/index.hbs +++ b/ui/app/templates/vault/cluster/metrics/index.hbs @@ -5,10 +5,13 @@ + + @dataset={{this.testData}} + @chartData={{array "distinct_entities" "non_entity_tokens" "clients"}} /> +