Commit 89cce2ee authored by pacome's avatar pacome

[client/timeserie] update style on plot legend

parent c9d4ea74
import { DIV, SPAN, H3 } from 'sdi/components/elements';
import { DIV, SPAN } from 'sdi/components/elements';
import tr, { fromRecord } from 'sdi/locale';
import {
getSelectedKind,
// getSelectedKind,
getCurrentFeature,
} from 'timeserie/src/queries/timeserie';
import { ParameterType } from 'timeserie/src/types';
// import { ParameterType } from 'timeserie/src/types';
import { Feature } from 'sdi/source';
import { getFeaturePropOption } from 'sdi/util';
import { Option } from 'fp-ts/lib/Option';
......@@ -21,22 +21,22 @@ import { Option } from 'fp-ts/lib/Option';
// )
// );
const kindLabel = (kind: ParameterType) => {
switch (kind) {
case 'ground-quantity':
return tr.ts('legendGroundQuantity');
case 'ground-quality':
return tr.ts('legendGroundQuality');
case 'surface':
return tr.ts('legendSurface');
}
};
// const kindLabel = (kind: ParameterType) => {
// switch (kind) {
// case 'ground-quantity':
// return tr.ts('legendGroundQuantity');
// case 'ground-quality':
// return tr.ts('legendGroundQuality');
// case 'surface':
// return tr.ts('legendSurface');
// }
// };
const renderKind = () =>
H3(
{},
getSelectedKind().map((kind) => kindLabel(kind))
);
// const renderKind = () =>
// H3(
// {},
// getSelectedKind().map((kind) => kindLabel(kind))
// );
const renderName = (f: Feature) =>
getFeaturePropOption(f, 'nom').map((prop) =>
......@@ -516,7 +516,7 @@ const render = () =>
DIV(
{ className: 'map-info' },
// H2({}, tr.ts('StationInfos')),
renderKind(),
// renderKind(),
// renderId(),
getCurrentFeature().map((f) =>
DIV(
......
import { DIV, SPAN, H2 } from 'sdi/components/elements';
import { DIV, SPAN, H3 } from 'sdi/components/elements';
import {
renderButtonTableModeStations,
renderButtonTableModeParameters
renderButtonTableModeParameters,
} from '../button';
import {
getTableMode,
getSelectedParameterList,
getSelectedStationList,
getSelectedStationIndex,
getSelectedParameterIndex
getSelectedParameterIndex,
} from 'timeserie/src/queries/timeserie';
import {
setTableMode,
setSelectedStationIndex,
setSelectedParameterIndex
setSelectedParameterIndex,
} from 'timeserie/src/events/timeserie';
import { Parameter } from 'timeserie/src/remote/timeserie';
import tr, { fromRecord } from 'sdi/locale';
......@@ -37,7 +37,7 @@ const renderParameter = (param: Parameter, index: number) =>
{
key: `table-parameter-${index}`,
className: parameterClassName(index),
onClick: () => setSelectedParameterIndex(index)
onClick: () => setSelectedParameterIndex(index),
},
fromRecord(param.name)
);
......@@ -51,7 +51,7 @@ const renderParameterList = () =>
const renderParameters = () =>
DIV(
{},
H2({}, tr.ts('perParameter')),
H3({}, tr.ts('perParameter')),
renderMultiselectHelp(),
renderButtonTableModeStations(() => setTableMode('per-station')),
renderParameterList()
......@@ -67,13 +67,10 @@ export const renderStation = (s: StationSelection, index: number) =>
{
key: `table-feature-${index}`,
className: stationClassName(index),
onClick: () => setSelectedStationIndex(index)
onClick: () => setSelectedStationIndex(index),
},
// SPAN({ className: 'identifier' }, feature.id),
SPAN(
{ className: 'name' },
stationString(s),
)
SPAN({ className: 'name' }, stationString(s))
);
const renderStationList = () =>
......@@ -85,7 +82,7 @@ const renderStationList = () =>
const renderStations = () =>
DIV(
{},
H2({}, tr.ts('perStation')),
H3({}, tr.ts('perStation')),
renderMultiselectHelp(),
renderButtonTableModeParameters(() => setTableMode('per-parameter')),
renderStationList()
......
......@@ -18,9 +18,11 @@ import renderSelection from '../point-selector';
import {
getLevel,
getSelectedStationList,
getSelectedKind,
} from 'timeserie/src/queries/timeserie';
import { markdown } from 'sdi/ports/marked';
import tr from 'sdi/locale';
import { ParameterType } from 'timeserie/src/types';
const renderActions = () =>
DIV(
......@@ -55,10 +57,28 @@ const renderMultiselectHelp = () =>
markdown(tr.ts('stationMultiselectHelptext'))
);
const kindLabel = (kind: ParameterType) => {
switch (kind) {
case 'ground-quantity':
return tr.ts('legendGroundQuantity');
case 'ground-quality':
return tr.ts('legendGroundQuality');
case 'surface':
return tr.ts('legendSurface');
}
};
const renderKind = () =>
H3(
{},
getSelectedKind().map((kind) => kindLabel(kind))
);
const renderStations = () =>
DIV(
{},
H3({}, tr.ts('perStation')),
// H3({}, tr.ts('perStation')),
renderKind(),
renderMultiselectHelp(),
renderStationList()
);
......
......@@ -47,7 +47,7 @@ const messages = {
},
parameter: {
fr: 'paramètre(s)',
fr: 'Paramètre(s)',
nl: '', // nltodo
},
......@@ -134,7 +134,7 @@ const messages = {
},
legend: {
fr: `légende`,
fr: `Légende`,
nl: '', // nltodo
},
......
......@@ -4,9 +4,9 @@
}
.plot-legend {
overflow: hidden;
display: flex;
flex-direction: column;
// overflow: hidden;
// display: flex;
// flex-direction: column;
}
.legend__group {
......
......@@ -10,6 +10,13 @@
}
}
h3 {
font-weight: @fwSemiBold;
font-size: 1rem;
margin-bottom: @margin / 2;
margin-top: @margin;
}
.legend-item {
display: flex;
margin-bottom: @margin;
......@@ -56,6 +63,10 @@
height: 100%;
}
}
.content__footer {
display: flex;
justify-content: space-between;
}
}
.content__side {
......@@ -67,6 +78,7 @@
overflow: auto;
.map-info {
overflow: auto;
// height: 100%;
// overflow-y: auto;
// overflow-x: hidden;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment