c9eb55cc16
* creates bar chart component * WIP//starts styling * fixes width of bars * WIP//barchart * uses d3 max method instead of Math.max * stacks data * adds y axis * fixes styling and spacing * adds spacing between bars * styling DONE * adds legend * adds tooltip * tweaks styling adds pointer cursor to rects * fixes tooltip placement * moves starget from bar to whole area * finishes hover selection styling * cleans up * cleans up a tiny bit * stopping point * adjusts tooltip placemnt * WIP//clean up time * sort of not broken * unbroken, ish * tooltip position fixed * truncates text and adds tooltip * changes tooltip width depending on content * unbroken * finishes initial refactor/cleanup * finishes documentation * passes in map legend to component * more tidying * add export option * adds grid to header for export button option * updates comments * fix variable name change * moves dataset formatting to parent * removes unused code" * adds assertions and empty state if no data * cleans up comments adds assertion to check for map legend * adds storybook * adds changelog * deletes dummy parent: * restores index.hbs * uses scss variables instead * exchanges more variables * remove unused variable in storybook * writes basic test * removes pauseTest()
82 lines
2.2 KiB
JavaScript
82 lines
2.2 KiB
JavaScript
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) {
|
|
let dataset = [
|
|
{
|
|
namespace_id: 'root',
|
|
namespace_path: 'root',
|
|
counts: {
|
|
distinct_entities: 268,
|
|
non_entity_tokens: 985,
|
|
clients: 1253,
|
|
},
|
|
},
|
|
{
|
|
namespace_id: 'O0i4m',
|
|
namespace_path: 'top-namespace',
|
|
counts: {
|
|
distinct_entities: 648,
|
|
non_entity_tokens: 220,
|
|
clients: 868,
|
|
},
|
|
},
|
|
{
|
|
namespace_id: '1oihz',
|
|
namespace_path: 'anotherNamespace',
|
|
counts: {
|
|
distinct_entities: 547,
|
|
non_entity_tokens: 337,
|
|
clients: 884,
|
|
},
|
|
},
|
|
{
|
|
namespace_id: '1oihz',
|
|
namespace_path: 'someOtherNamespaceawgagawegawgawgawgaweg',
|
|
counts: {
|
|
distinct_entities: 807,
|
|
non_entity_tokens: 234,
|
|
clients: 1041,
|
|
},
|
|
},
|
|
];
|
|
|
|
let flattenData = () => {
|
|
return dataset.map(d => {
|
|
return {
|
|
label: d['namespace_path'],
|
|
non_entity_tokens: d['counts']['non_entity_tokens'],
|
|
distinct_entities: d['counts']['distinct_entities'],
|
|
total: d['counts']['clients'],
|
|
};
|
|
});
|
|
};
|
|
|
|
this.set('title', 'Top Namespaces');
|
|
this.set('description', 'Each namespaces client count includes clients in child namespaces.');
|
|
this.set('dataset', flattenData());
|
|
|
|
await render(hbs`
|
|
<BarChart
|
|
@title={{title}}
|
|
@description={{description}}
|
|
@dataset={{dataset}}
|
|
@mapLegend={{array
|
|
(hash key="non_entity_tokens" label="Active direct tokens")
|
|
(hash key="distinct_entities" label="Unique Entities")}}
|
|
>
|
|
<button type="button" class="link">
|
|
Export all namespace data
|
|
</button>
|
|
</BarChart>
|
|
`);
|
|
|
|
assert.dom('.bar-chart-wrapper').exists('it renders');
|
|
});
|
|
});
|