Skip to content

Commit

Permalink
Merge pull request #255 from catenax-ng/relaease/v2.2.0-battery-compo…
Browse files Browse the repository at this point in the history
…sition-graph

[ 2° ] - Relaease/v2.2.0 battery composition graph
  • Loading branch information
saudkhan116 authored Mar 26, 2024
2 parents 53180f3 + daaafc1 commit abc6367
Show file tree
Hide file tree
Showing 8 changed files with 315 additions and 71 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ The changelog format is based on [Keep a Changelog](https://keepachangelog.com/e
- Updated hardcoded units
- Updated translations
- Updated missing data fields
- Updated battery graph

## Added
- Added timeout in negotiation and transfer requests for avoiding infinite loops. When status from transfer does not changes from STARTED.
Expand Down
96 changes: 96 additions & 0 deletions src/assets/styles/components/passport/batteryGraph.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
/**
* Tractus-X - Digital Product Passport Application
*
* Copyright (c) 2022, 2024 BASF SE, BMW AG, Henkel AG & Co. KGaA
* Copyright (c) 2022, 2024 Contributors to the Eclipse Foundation
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
*
* This program and the accompanying materials are made available under the
* terms of the Apache License, Version 2.0 which is available at
* https://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
* either express or implied. See the
* License for the specific language govern in permissions and limitations
* under the License.
*
* SPDX-License-Identifier: Apache-2.0
*/

.battery-graph {
display: flex;
flex-direction: column;
align-items: center;
width: 380px;
padding: 7px;
display: flex;
background-color: #f5f5f5;
border-radius: 8px;
// margin-left: 6px;
// margin-bottom: 12px;
margin: 6px 0 12px 6px;
@include background-image(
$background-image-url,
$background-color,
$background-size,
$background-position,
$background-repeat
);

.graph-icon {
width: 100%;
}
.composition-graph {
width: 100%;
display: flex;

.composition-section {
position: relative;
width: 50%;
display: flex;
flex-direction: column;
margin-bottom: 10px;
}

.composition-bar-container {
display: flex;
flex-direction: column;
margin-top: 10px;
width: 30px;

.component-label-container {
position: absolute;
font-weight: 600;
background: #f5f5f5;
padding: 0 5px;
white-space: nowrap;
}
.component-label-line {
position: absolute;
padding: 0 20px;
height: 1px;
background-color: black;
width: 70%;
}
}
.composition-title {
font-size: 11px;
font-weight: 500;
}
.composition-bar {
display: flex;
align-items: center;
width: 100%;
font-size: 14px;
height: 100%;
}
}
.type {
font-size: 12px;
font-weight: 600;
}
}
14 changes: 14 additions & 0 deletions src/assets/styles/config/variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,17 @@ $catena-x-light-blue: rgb(130, 195, 255);
$catena-x-extra-light-blue: rgb(212, 227, 254);
$catena-x-dark-blue: rgb(13, 85, 175);
$catena-x-black: rgb(17, 17, 17);

$background-image-url: "@/media/BatteryCompBG.svg";
$background-color: #f5f5f5;
$background-size: cover;
$background-position: center;
$background-repeat: no-repeat;

@mixin background-image($url, $color, $size, $position, $repeat) {
background-color: $color;
background-image: url($url);
background-size: $size;
background-position: $position;
background-repeat: $repeat;
}
1 change: 1 addition & 0 deletions src/assets/styles/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
@import "components/passport/cards";
@import "components/landing/searchView";
@import "components/passport/sections";
@import "components/passport/batteryGraph";
@import "components/passport/passportPage";
@import "components/general/notFound";
@import "components/general/loading";
Expand Down
161 changes: 140 additions & 21 deletions src/components/passport/sections/CellChemistry.vue
Original file line number Diff line number Diff line change
Expand Up @@ -25,44 +25,101 @@
<div class="section">
<v-container class="ma-0">
<v-row class="section">
<v-col sm="12" md="4" class="pa-0 ma-0">
<v-col sm="12" md="2" class="pa-0 ma-0">
<AttributeField
icon="mdi-battery-plus"
:attributes-list="electrolyteComposition"
:label="$t('sections.cellChemistry.electrolyteComposition')"
data-cy="electrolyte-composition"
style="margin-bottom: 12px; amx"
style="margin-bottom: 12px"
/>
<div>
<img
:src="BatteryComposition"
alt="BatteryComposition"
style="margin-left: 6px"
/>
</v-col>
<v-col sm="12" md="6" class="pa-0 ma-0">
<div class="battery-graph">
<div class="graph-icon">
<v-icon>mdi-battery-outline</v-icon>
</div>

<div class="composition-graph">
<div
v-for="(detail, detailIndex) in batteryData.composition"
:key="detailIndex"
class="composition-section"
:style="
detailIndex === 0 ? 'align-items: end' : 'align-items: start'
"
>
<div
class="composition-title"
:style="
detailIndex === 0
? 'align-self: flex-start'
: 'align-self: flex-end'
"
>
{{ detail.title }}
</div>
<div class="composition-bar-container">
<div
v-for="(component, index) in detail.composition"
:key="index"
class="composition-bar"
:style="[
{
height: component.value * 1.5 + 'px',
backgroundColor: getColor(detailIndex + '.' + index),
},
detailIndex === 0 && index === 0
? { 'border-top-left-radius': '6px' }
: {},
detailIndex === 1 && index === 0
? { 'border-top-right-radius': '6px' }
: {},
detailIndex === 1 &&
index === detail.composition.length - 1
? { 'border-bottom-right-radius': '6px' }
: {},
detailIndex === 0 &&
index === detail.composition.length - 1
? { 'border-bottom-left-radius': '6px' }
: {},
]"
>
<div
:style="detailIndex === 0 ? 'right:12px' : 'left:12px'"
class="component-label-line"
></div>
<div
class="component-label-container"
:style="{
left: detailIndex === 0 ? '0' : 'auto',
right: detailIndex === 0 ? 'auto' : '0',
}"
>
{{ component.label }}
</div>
</div>
</div>
</div>
</div>
<p class="type">{{ batteryData.title }}</p>
</div>
</v-col>
</v-row>
</v-container>
<v-container class="ma-0">
<v-row class="section">
<v-col sm="12" md="12" class="pa-0 ma-0">
<div
class="element-chart-label"
style="margin-left: -5px; margin-bottom: 15px"
>
<v-col sm="12" md="4" class="pa-0 ma-0">
<div class="element-chart-label" style="margin-bottom: 15px">
{{ $t("sections.cellChemistry.recyclateContent") }}
</div>
<ElementChart :data="propsData" />
<ElementChart :data="propsData" style="margin-left: 12px" />
</v-col>
</v-row>
</v-container>
</div>
</template>

<script>
<script >
import AttributeField from "../AttributeField.vue";
import BatteryComposition from "../../../media/BatteryComposition.svg";
import ElementChart from "../../passport/ElementChart.vue";
import batteryDetails from "../../../config/templates/batteryGraph.json";

export default {
name: "CellChemistry",
Expand All @@ -71,8 +128,32 @@ export default {
ElementChart,
},
setup() {
const getColor = (label) => {
const colors = {
"0.0": "#676BC6",
0.1: "#FFEBCC",
0.2: "#FFD700",
0.3: "#BDB76B",
0.4: "#FF4500",
0.5: "#2E8B57",
0.6: "#D2691E",
"1.0": "#88982D",
1.1: "#428C5B",
1.2: "#F0F5D5",
1.3: "#337B89",
1.4: "#303030",
1.5: "#486079",
1.6: "#008B8B",
1.7: "#B8860B",
1.8: "#32CD32",
1.9: "#FFA07A",
"1.10": "#6A5ACD",
};
return colors[label] || "#333";
};

return {
BatteryComposition,
getColor,
};
},
props: {
Expand All @@ -83,6 +164,7 @@ export default {
},
data() {
return {
batteryData: batteryDetails,
propsData: [
{
materialPercentageMassFraction: 47,
Expand Down Expand Up @@ -121,5 +203,42 @@ export default {
],
};
},
async mounted() {
if (this.batteryData && this.batteryData.batteryDetails) {
this.completeComponents(this.batteryData.batteryDetails);
}
},
methods: {
getLabelPosition(index, arrayLength) {
const baseOffset = 20;
const length = 30 - arrayLength;
const position = length + baseOffset * index;
return position;
},
completeComponents(batteryDetails) {
batteryDetails.forEach((detail) => {
const total = detail.composition.reduce(
(sum, component) => sum + component.value,
0
);
if (total < 100) {
const difference = 100 - total;
detail.composition.push({
label: "Other",
value: difference,
unit: "%",
});
} else if (total > 100) {
const factor = 100 / total;
detail.composition = detail.composition.map((component) => ({
label: component.label,
value: component.value * factor,
unit: component.unit,
}));
}
});
},
},
};
</script>

50 changes: 50 additions & 0 deletions src/config/templates/batteryGraph.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
{
"title": "NCA",
"composition": [
{
"title": "Composition of Andode",
"composition": [
{
"label": "SiO2-C",
"value": 50,
"unit": "%"
},
{
"label": "Styren butadien",
"value": 50,
"unit": "%"
}
]
},
{
"title": "Composition of Cathode",
"composition": [
{
"label": "Lithium",
"value": 20,
"unit": "%"
},
{
"label": "Nickel",
"value": 20,
"unit": "%"
},
{
"label": "Cobalt",
"value": 20,
"unit": "%"
},
{
"label": "Aluminium",
"value": 30,
"unit": "%"
},
{
"label": "Carbon black",
"value": 10,
"unit": "%"
}
]
}
]
}
Loading

0 comments on commit abc6367

Please sign in to comment.