Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[draft] Redesign the table and pie view #65

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

[draft] Redesign the table and pie view #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ input:checked + .slider:before {

.ag_container {
width: 100%;
height: var(--grid-height, 300px);
height: var(--grid-height, 600px);
}

.bx--snippet__icon {
Expand Down
159 changes: 89 additions & 70 deletions src/lib/DataExplorer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,18 +113,83 @@
</script>


<div class="flex flex-col">
<div class="flex flex-row flex-wrap md:mt-2 justify-around">
<!-- pie + form container-->
<div class="flex flex-row flex-wrap-reverse justify-center">

<div class="md:flex flex-row md:mt-2 justify-around">

<DataGrid on:updateDataGrid={onDataGridUpdate} />

<!-- pie + customize value form-->
<div class="flex flex-col justify-center">

<!-- customize value form-->
<div id="form-container" class="flex flex-col md:rounded-r px-5 py-5 bg-opacity-20 max-w-sm border-solid border-2 border-teal-500/20 text-sm" >

<div id="title" class="text-xl mb-3 font-medium">{$_('manufdata.custom_values')}</div>
{#if disabledCustomValue == false }
<!-- <p class="text-xs mb-2 font-light">
{@html $_('manufdata.explanation.8')}
</p>
<p class="text-xs mb-2 font-light">
{@html $_('manufdata.explanation.9')}
</p> -->
{:else}
<p class="text-xs mb-2 font-light text-red-400">
{$_('manufdata.explanation.error')}
</p>
{/if}

<!-- region picker -->
<p>
{$_('manufdata.select_country_elec_impact')} ({$_('manufdata.select_country_elec_impact_tooltip')})
</p>
<!-- select region -->
<div class="mb-3">
<div class="flex">
<!-- destroy/recreate component on locale update -->
{#key $locale}
<RegionPicker bind:value={selectedRegion} bind:isDefaultRegion={isDefaultRegion} isDisabled="{disabledCustomValue}"/>
{/key}
</div>

</div>
<!-- end of region picker -->
<!-- input lifetime -->
<div class="mb-3">
<p class="block">{$_('manufdata.lifetime')} ({$_('manufdata.years_tooltip')})</p>
<div class="flex">

<input id="lifetime" bind:value={lifetime} on:input={changeLifetime} type="number" class="border-2 pl-2 w-auto" min="0.5" max="100" step="0.5" disabled="{disabledCustomValue}"/>
<span class="text-sm border-2 rounded-r px-4 py-1 bg-gray-300 whitespace-no-wrap">
{$_('manufdata.years')}
</span>
</div>
<!-- <small id="lifetimeHelp" class="block mt-1 text-xs text-gray-600">{$_('manufdata.years_tooltip')}</small> -->
</div>
<!-- button toggle yearly/total -->
<div class="flex mx-auto mt-1 mb-1">
<div class="mw-1/3 py-1 px-2">{$_('pie.total')}</div>
<label class="mw-1/3 switch">
<input type="checkbox" id="yearlycheck" bind:checked={yearly}>
<span class="slider round"></span>
</label>
<div class="mw-1/3 py-1 px-2">{$_('pie.yearly')}</div>
</div>
<!-- end of button toggle yearly/total -->




</div>

<!-- pie-->
<div id="viz-container" class="flex flex-col md:rounded-l content-center py-5 px-10 border-solid border-2 border-teal-500/20">
{#if isNaN(ratioScope.total)}
<div id="result-title" class="text-xl font-normal text-center">{$_('pie.title')}</div>
<div id="result-highlight" class="text-center text-4xl font-medium my-2 text-green">{impactTotal} kgCO2eq</div>
<div id="result-highlight" class="text-center text-2xl font-medium my-2 text-green">{impactTotal} kgCO2eq</div>
<div id="result-impossible" class="max-w-sm text-m font-normal text-center">{$_('pie.impossible')}</div>
{:else}
<div id="result-title" class="text-xl font-normal text-center">{$_('pie.title')}</div>
<div id="result-highlight" class="text-center text-4xl font-medium my-2 text-green">{ratioScope.total} kgCO2eq
<div id="result-highlight" class="text-center text-2xl font-medium my-2 text-green">{ratioScope.total} kgCO2eq
{#if yearly}
/ {$_('pie.year')}
{/if}
Expand Down Expand Up @@ -162,75 +227,29 @@
</div>
{/if}
</div>
<!-- end of pie-->

<!-- export panel -->

<div id="form-container" class="flex flex-col md:rounded-r px-5 py-5 bg-opacity-20 max-w-sm bg-teal-500" >
<div id="title" class="text-xl mb-5 font-medium text-center">{$_('manufdata.custom_values')}</div>
<!-- button toggle yearly/total -->
<div class="flex mx-auto mt-1 mb-5">
<div class="mw-1/3 py-1 px-2">{$_('pie.total')}</div>
<label class="mw-1/3 switch">
<input type="checkbox" id="yearlycheck" bind:checked={yearly}>
<span class="slider round"></span>
</label>
<div class="mw-1/3 py-1 px-2">{$_('pie.yearly')}</div>
</div>
<p>
{$_('manufdata.select_country_elec_impact')}
</p>
<!-- select region -->
<div class="mt-2 mb-5">
<div class="flex">
<!-- destroy/recreate component on locale update -->
{#key $locale}
<RegionPicker bind:value={selectedRegion} bind:isDefaultRegion={isDefaultRegion} isDisabled="{disabledCustomValue}"/>
{/key}
</div>
<small id="regionHelp" class="block mt-1 text-xs text-gray-600">{$_('manufdata.select_country_elec_impact_tooltip')}</small>
</div>

<!-- input lifetime -->
<div class="mb-3">
<p class="block">{$_('manufdata.lifetime')}</p>
<div class="flex">

<input id="lifetime" bind:value={lifetime} on:input={changeLifetime} type="number" class="border-2 pl-2 w-auto" min="0.5" max="100" step="0.5" disabled="{disabledCustomValue}"/>
<span class="text-sm border-2 rounded-r px-4 py-1 bg-gray-300 whitespace-no-wrap">
{$_('manufdata.years')}
</span>
</div>
<small id="lifetimeHelp" class="block mt-1 text-xs text-gray-600">{$_('manufdata.years_tooltip')}</small>
</div>

{#if disabledCustomValue == false }
<p class="text-xs mb-2 font-light">
{@html $_('manufdata.explanation.8')}
</p>
<p class="text-xs mb-2 font-light">
{@html $_('manufdata.explanation.9')}
</p>
{:else}
<p class="text-xs mb-2 font-light">
{$_('manufdata.explanation.error')}
</p>
{/if}
<!-- export panel -->
<div class="flex-row mx-auto">
<!-- <div id="title export" class="text-xl mt-3 font-medium text-center">{$_('pie.export')}</div> -->

<!-- export chart image -->
<ExportChartImage />
<!-- export csv -->
<ExportCsv {selectedRows} {lifetime} {hascustomlifetime} {selectedRegion}/>

</div>
<div class="flex-row mx-auto">
<div id="title export" class="text-xl mt-3 font-medium text-center">{$_('pie.export')}</div>

<!-- export chart image -->
<ExportChartImage />
<!-- export csv -->
<ExportCsv {selectedRows} {lifetime} {hascustomlifetime} {selectedRegion}/>

</div>
<div class="flex-row mx-auto">
<!-- share permalink, does not work (yet) with one equipment selection-->
<ShareLinkButton {pageUrl} {lifetime} {selectedRegion} {yearly} {filterModels} singleItemSelected={singleItemSelected(selectedRows)}/>
</div>
<!-- share permalink, does not work (yet) with one equipment selection-->
<ShareLinkButton {pageUrl} {lifetime} {selectedRegion} {yearly} {filterModels} singleItemSelected={singleItemSelected(selectedRows)}/>
</div>
</div>
<!-- end of export panel -->

</div>
<DataGrid on:updateDataGrid={onDataGridUpdate}/>

</div>
<!-- end of pie + form container-->
</div>

20 changes: 12 additions & 8 deletions src/lib/datagrid/DataGrid.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,9 @@
}
</script>

<div id="datagrid-root" class="flex flex-wrap justify-between">
<div class="flex grow flex-wrap my-2 space-x-0.5 > * + * ">
<div id="datagrid-root" class="flex flex-col">
<!-- search filters -->
<div class="flex flex-wrap my-2 space-x-0.5 > * + * ">
<button class="my-2 inline-block blue-button hover:bg-teal-800 disabled:opacity-20 text-white font-bold py-1 px-4 border rounded" on:click={resetDataGrid}>{$_('datagrid.filter_reset')}
</button>
<div class="inline-block flex-wrap">
Expand Down Expand Up @@ -185,11 +186,14 @@
</div>
</div>
</div>
<!-- end of search filters -->

<AgGridWrapper
{options}
data={allRows}
on:select={onSelect}
flatFilterModels={currentFilterModel}
/>

</div>

<AgGridWrapper
{options}
data={allRows}
on:select={onSelect}
flatFilterModels={currentFilterModel}
/>
2 changes: 1 addition & 1 deletion src/lib/datagrid/_AgGridWrapper.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@
$: updateData(data);
</script>

<div class="ag_container" id="aggridwrapper-root">
<div class="ag_container hidden md:block" id="aggridwrapper-root">
<div
bind:this={ref}
style="height: 100%; width:100%"
Expand Down
14 changes: 8 additions & 6 deletions src/routes/manufacturerdata/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@
import DataExplorer from "$lib/DataExplorer.svelte";
</script>
<div id="content" class="px-4">
<h2 class="title-second mt-2">{$_('manufdata.title')}</h2>
<div class="text-sm mb-2">
{$_('manufdata.explanation.6')}
<div class="mb-4">
<h2 class="title-second mt-2">{$_('manufdata.title')}</h2>
<div class="text-sm mb-2">
{$_('manufdata.explanation.6')}
</div>
<p class="text-sm mb-2">
{$_('manufdata.explanation.10')} <a class="link" href={$_('manufdata.explanation.12')} target="_blank">{$_('manufdata.explanation.11')}</a> {$_('manufdata.explanation.13')}
</p>
</div>
<p class="text-sm mb-2">
{$_('manufdata.explanation.10')} <a class="link" href={$_('manufdata.explanation.12')} target="_blank">{$_('manufdata.explanation.11')}</a> {$_('manufdata.explanation.13')}
</p>
<DataExplorer/>
</div>