Skip to content

Commit

Permalink
Merge pull request #44 from ScottLogic/icon-tooltips
Browse files Browse the repository at this point in the history
Add TCS icons to chart tooltips
  • Loading branch information
jmain-scottlogic authored Apr 25, 2024
2 parents d6d4b87 + bd9f4fe commit aaa22c8
Show file tree
Hide file tree
Showing 9 changed files with 173 additions and 81 deletions.
4 changes: 2 additions & 2 deletions docs/types.md
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ classDiagram
}
class DownstreamEstimation {
endUser: number;
network: number;
networkTransfer: number;
}
```

Expand Down Expand Up @@ -202,4 +202,4 @@ multiplyValues<T extends NumberObject>(input: T, factor: number): T
Multiplies every number in the object by the given factor, returning the same type as the input.
These are used at the end of the estimation process to calculate totals and scale the estimations from Kg CO2e to percentages.
These are used at the end of the estimation process to calculate totals and scale the estimations from Kg CO2e to percentages.
28 changes: 28 additions & 0 deletions src/app/carbon-estimation/carbon-estimation.component.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,31 @@
::ng-deep .apexcharts-legend-series:hover {
background-color: rgb(226 232 240);
}

::ng-deep .apexcharts-tooltip.apexcharts-theme-light {
border: none !important;
}

::ng-deep .web-logo {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath style='fill:white' d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h420v-140H160v140Zm500 0h140v-360H660v360ZM160-460h420v-140H160v140Z'/%3E%3C/svg%3E");
}

::ng-deep .devices-logo {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath style='fill:white' d='M80-160v-120h80v-440q0-33 23.5-56.5T240-800h600v80H240v440h240v120H80Zm520 0q-17 0-28.5-11.5T560-200v-400q0-17 11.5-28.5T600-640h240q17 0 28.5 11.5T880-600v400q0 17-11.5 28.5T840-160H600Zm40-120h160v-280H640v280Zm0 0h160-160Z'/%3E%3C/svg%3E");
}

::ng-deep .router-logo {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath style='fill:white' d='M200-120q-33 0-56.5-23.5T120-200v-160q0-33 23.5-56.5T200-440h400v-160h80v160h80q33 0 56.5 23.5T840-360v160q0 33-23.5 56.5T760-120H200Zm0-80h560v-160H200v160Zm80-40q17 0 28.5-11.5T320-280q0-17-11.5-28.5T280-320q-17 0-28.5 11.5T240-280q0 17 11.5 28.5T280-240Zm140 0q17 0 28.5-11.5T460-280q0-17-11.5-28.5T420-320q-17 0-28.5 11.5T380-280q0 17 11.5 28.5T420-240Zm140 0q17 0 28.5-11.5T600-280q0-17-11.5-28.5T560-320q-17 0-28.5 11.5T520-280q0 17 11.5 28.5T560-240Zm10-390-58-58q26-24 58-38t70-14q38 0 70 14t58 38l-58 58q-14-14-31.5-22t-38.5-8q-21 0-38.5 8T570-630ZM470-730l-56-56q44-44 102-69t124-25q66 0 124 25t102 69l-56 56q-33-33-76.5-51.5T640-800q-50 0-93.5 18.5T470-730ZM200-200v-160 160Z'/%3E%3C/svg%3E");
}

::ng-deep .storage-logo {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath style='fill:white' d='M120-160v-160h720v160H120Zm80-40h80v-80h-80v80Zm-80-440v-160h720v160H120Zm80-40h80v-80h-80v80Zm-80 280v-160h720v160H120Zm80-40h80v-80h-80v80Z'/%3E%3C/svg%3E");
}

::ng-deep .cloud-logo {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath style='fill:white' d='M260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H260Zm0-80h480q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41Zm220-240Z'/%3E%3C/svg%3E");
}

::ng-deep .cell-tower-logo {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath style='fill:white' d='M196-276q-57-60-86.5-133T80-560q0-78 29.5-151T196-844l48 48q-48 48-72 110.5T148-560q0 63 24 125.5T244-324l-48 48Zm96-96q-39-39-59.5-88T212-560q0-51 20.5-100t59.5-88l48 48q-30 27-45 64t-15 76q0 36 15 73t45 67l-48 48ZM280-80l135-405q-16-14-25.5-33t-9.5-42q0-42 29-71t71-29q42 0 71 29t29 71q0 23-9.5 42T545-485L680-80h-80l-26-80H387l-27 80h-80Zm133-160h134l-67-200-67 200Zm255-132-48-48q30-27 45-64t15-76q0-36-15-73t-45-67l48-48q39 39 58 88t22 100q0 51-20.5 100T668-372Zm96 96-48-48q48-48 72-110.5T812-560q0-63-24-125.5T716-796l48-48q57 60 86.5 133T880-560q0 78-28 151t-88 133Z'/%3E%3C/svg%3E");
}
27 changes: 23 additions & 4 deletions src/app/carbon-estimation/carbon-estimation.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,10 @@ describe('CarbonEstimationComponent', () => {
},
downstreamEmissions: {
endUser: 13,
network: 12,
networkTransfer: 12,
},
};

fixture.componentRef.setInput('carbonEstimation', carbonEstimation);

fixture.detectChanges();
Expand Down Expand Up @@ -114,18 +115,22 @@ describe('CarbonEstimationComponent', () => {
{
x: 'Software - Off the Shelf',
y: 7,
meta: { svg: 'web-logo', parent: 'Upstream Emissions' },
},
{
x: 'User Hardware',
y: 6,
meta: { svg: 'devices-logo', parent: 'Upstream Emissions' },
},
{
x: 'Networking and Infrastructure Hardware',
y: 6,
meta: { svg: 'router-logo', parent: 'Upstream Emissions' },
},
{
x: 'Servers and Storage Hardware',
y: 6,
meta: { svg: 'storage-logo', parent: 'Upstream Emissions' },
},
],
},
Expand All @@ -136,14 +141,17 @@ describe('CarbonEstimationComponent', () => {
{
x: 'User Devices',
y: 9,
meta: { svg: 'devices-logo', parent: 'Direct Emissions' },
},
{
x: 'Networking and Infrastructure',
y: 8,
meta: { svg: 'router-logo', parent: 'Direct Emissions' },
},
{
x: 'Servers and Storage',
y: 8,
meta: { svg: 'storage-logo', parent: 'Direct Emissions' },
},
],
},
Expand All @@ -154,14 +162,17 @@ describe('CarbonEstimationComponent', () => {
{
x: 'Cloud Services',
y: 9,
meta: { svg: 'cloud-logo', parent: 'Indirect Emissions' },
},
{
x: 'SaaS',
y: 8,
meta: { svg: 'web-logo', parent: 'Indirect Emissions' },
},
{
x: 'Managed Services',
y: 8,
meta: { svg: 'storage-logo', parent: 'Indirect Emissions' },
},
],
},
Expand All @@ -172,10 +183,12 @@ describe('CarbonEstimationComponent', () => {
{
x: 'End-User Devices',
y: 13,
meta: { svg: 'devices-logo', parent: 'Downstream Emissions' },
},
{
x: 'Network Data Transfer',
y: 12,
meta: { svg: 'cell-tower-logo', parent: 'Downstream Emissions' },
},
],
},
Expand Down Expand Up @@ -209,7 +222,7 @@ describe('CarbonEstimationComponent', () => {
},
downstreamEmissions: {
endUser: 13,
network: 12,
networkTransfer: 12,
},
};
fixture.componentRef.setInput('carbonEstimation', carbonEstimation);
Expand Down Expand Up @@ -240,7 +253,7 @@ describe('CarbonEstimationComponent', () => {
},
downstreamEmissions: {
endUser: 25,
network: 0,
networkTransfer: 0,
},
};
fixture.componentRef.setInput('carbonEstimation', carbonEstimation);
Expand All @@ -255,6 +268,7 @@ describe('CarbonEstimationComponent', () => {
{
x: 'Software - Off the Shelf',
y: 25,
meta: { svg: 'web-logo', parent: 'Upstream Emissions' },
},
],
},
Expand All @@ -265,6 +279,7 @@ describe('CarbonEstimationComponent', () => {
{
x: 'User Devices',
y: 25,
meta: { svg: 'devices-logo', parent: 'Direct Emissions' },
},
],
},
Expand All @@ -275,6 +290,7 @@ describe('CarbonEstimationComponent', () => {
{
x: 'Cloud Services',
y: 25,
meta: { svg: 'cloud-logo', parent: 'Indirect Emissions' },
},
],
},
Expand All @@ -285,6 +301,7 @@ describe('CarbonEstimationComponent', () => {
{
x: 'End-User Devices',
y: 25,
meta: { svg: 'devices-logo', parent: 'Downstream Emissions' },
},
],
},
Expand Down Expand Up @@ -314,7 +331,7 @@ describe('CarbonEstimationComponent', () => {
},
downstreamEmissions: {
endUser: 0,
network: 0,
networkTransfer: 0,
},
};
fixture.componentRef.setInput('carbonEstimation', carbonEstimation);
Expand All @@ -329,6 +346,7 @@ describe('CarbonEstimationComponent', () => {
{
x: 'Software - Off the Shelf',
y: 50,
meta: { svg: 'web-logo', parent: 'Upstream Emissions' },
},
],
},
Expand All @@ -339,6 +357,7 @@ describe('CarbonEstimationComponent', () => {
{
x: 'User Devices',
y: 50,
meta: { svg: 'devices-logo', parent: 'Direct Emissions' },
},
],
},
Expand Down
Loading

0 comments on commit aaa22c8

Please sign in to comment.