Skip to content

Commit

Permalink
Assessment rating overview for info tile
Browse files Browse the repository at this point in the history 
#CTCTOWALTZ-2623
#finos#6358
  • Loading branch information
@JWoodland-Scott
JWoodland-Scott committed Jan 4, 2023
1 parent ad63a30 commit 8813045
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 78 deletions.
2 changes: 1 addition & 1 deletion waltz-ng/client/assessments/components/info-tile/AssessmentRatingGraph.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
font-size={dimensions.label.height}
text-anchor="end"
fill="black">
{truncate(ratingCount.rating?.name, 20)}
{truncate(ratingCount.rating?.name, 16)}
</text>
</g>
{/each}
155 changes: 95 additions & 60 deletions waltz-ng/client/assessments/components/info-tile/AssessmentWidget.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,15 @@
import DropdownPicker
from "../../../report-grid/components/svelte/column-definition-edit-panel/DropdownPicker.svelte";
import {determineIndexOfNextItemInList, determineIndexOfPreviousItemInList} from "../../../common/list-utils";
import {getSymbol} from "../../../common/svg-icon";
export let primaryEntityRef;
export let filters;
let dimensions = {
svg: {
height: 200,
width: 200
width: 300
},
padding: {
left: 40,
Expand All @@ -39,14 +40,15 @@
header: 10
},
bar: {
height: 10,
height: 15,
},
label: {
width: 80,
height: 8
height: 10
},
header: {
height: 12
height: 12,
button: 8
}
};
Expand All @@ -56,6 +58,7 @@
let assessmentSummaryCall;
let selectedDefnId;
let showAssessmentPicker = false;
let initialPageLoad = true;
function moveRight() {
const currentIndex = _.findIndex(sortedDefinitions, d => d.id === selectedDefnId);
Expand All @@ -76,8 +79,10 @@
}
function saveLastViewedPreference(defnId) {
const userPreference = {key: lastViewedAssessmentInfoTileKey, value: _.toString(defnId)}
userPreferenceStore.saveForUser(userPreference)
initialPageLoad = false;
const userPreference = {key: lastViewedAssessmentInfoTileKey, value: _.toString(defnId)};
userPreferenceStore.saveForUser(userPreference);
userPreferenceCall = userPreferenceStore.findAllForUser(true);
}
function selectDefinition(defn) {
Expand All @@ -99,13 +104,17 @@
let assessmentDefinitionCall = assessmentDefinitionStore.loadAll();
$: assessmentDefinitions = $assessmentDefinitionCall?.data;
$: lastViewedDefinition = _.isNil(lastViewedDefinitionString)
? _.first(sortedDefinitions)
: _.find(sortedDefinitions, d => d.id === _.toNumber(lastViewedDefinitionString.value));
$: lastViewedDefinition = !_.isNil(lastViewedDefinitionString)
? _.find(sortedDefinitions, d => d.id === _.toNumber(lastViewedDefinitionString.value))
: _.first(sortedDefinitions);
$: selectedDefinition = !_.isNil(lastViewedDefinition)
? lastViewedDefinition
: _.first(sortedDefinitions);
$: {
if (lastViewedDefinition && userPreferences && sortedDefinitions) {
selectedDefnId = lastViewedDefinition.id;
if (initialPageLoad && selectedDefinition) {
selectedDefnId = selectedDefinition.id;
}
}
Expand Down Expand Up @@ -155,57 +164,83 @@
</script>
<div>
<div class="col-sm-2" style="padding: 0">
<p>
<button class="btn btn-plain"
on:click={moveLeft}>
<Icon name="arrow-circle-left"/>
</button>
</p>
</div>
<div class="col-sm-8" style="padding: 0">
<p style="text-align: center">
{#if !showAssessmentPicker}
{_.get(definitionsById, [selectedDefnId, "name"], `Unknown definition [${selectedDefnId}]`)}
<button class="btn btn-plain btn-xs"
on:click={changeAssessment}>
<Icon name="pencil"/>
</button>
{:else}
<DropdownPicker items={sortedDefinitions}
onSelect={selectDefinition}/>
{/if}
</p>
</div>
<div class="col-sm-2 pull-right" style="padding: 0">
<p>
<button class="btn btn-plain"
on:click={moveRight}>
<Icon name="arrow-circle-right"/>
{#if showAssessmentPicker}
<DropdownPicker style="display: inline-block"
items={sortedDefinitions}
onSelect={selectDefinition}
defaultMessage="Select assessment"/>
<div style="padding-top: 1em; display:block">
<button class="btn btn-default"
style="align-items: start"
on:click={() => showAssessmentPicker = false}>
Cancel
</button>
</p>
</div>
</div>
<div>
<div class="col-sm-12"
class:waltz-scroll-region-200={_.size(graphData) > 12}>
<svg width="100%"
height={height + dimensions.header.height + dimensions.padding.header}>
<g class="header">
<text text-anchor="middle"
font-size={dimensions.header.height}
transform={`translate(${dimensions.svg.width - dimensions.label.width} ${(dimensions.header.height + dimensions.padding.header) / 2})`}>
{_.get(definitionsById, [selectedDefnId, "name"], `Unknown definition [${selectedDefnId}]`)}
</text>
</g>
<g class="assessment-bars"
transform={`translate(0, ${dimensions.header.height + dimensions.padding.header})`}>
<AssessmentRatingGraph {dimensions}
{graphData}/>
</g>
</svg>
</div>
</div>
{:else}
<div class="col-sm-12"
class:waltz-scroll-region-200={_.size(graphData) > 10}>
<svg width="100%"
height={height + dimensions.header.height + dimensions.padding.header}>
<g class="header clickable"
transform={`translate(0 ${(dimensions.header.height + dimensions.padding.header) / 2})`}>
<g on:click|stopPropagation={changeAssessment}
on:keydown|stopPropagation={changeAssessment}>
<rect fill="#fff"
transform={`translate(${dimensions.header.button} ${- dimensions.header.button})`}
stroke="none"
width={dimensions.svg.width - dimensions.header.button * 2}
height={dimensions.header.button * 2}>
</rect>
<text text-anchor="middle"
font-size={dimensions.header.height}
transform={`translate(${dimensions.svg.width / 2} 0)`}>
{_.get(definitionsById, [selectedDefnId, "name"], `Unknown definition [${selectedDefnId}]`)}
</text>
<path d={getSymbol("pencil", dimensions.header.button)}
transform={`translate(${dimensions.svg.width - dimensions.header.button * 4} ${- dimensions.header.button / 2})`}
fill="none"
stroke="#000"/>
</g>
<g on:click|stopPropagation={moveLeft}
on:keydown|stopPropagation={moveLeft}
transform={`translate(${dimensions.header.button} ${- dimensions.header.button / 2})`}
class="left-toggle clickable">
<rect fill="#fff"
transform={`translate(${- dimensions.header.button} ${- dimensions.header.button})`}
stroke="none"
width={dimensions.header.button * 2}
height={dimensions.header.button * 2}>
</rect>
<path d={getSymbol("leftArrow", dimensions.header.button)}
fill="none"
stroke="#000"/>
</g>
<g on:click|stopPropagation={moveRight}
on:keydown|stopPropagation={moveRight}
transform={`translate(${dimensions.svg.width - dimensions.header.button} ${- dimensions.header.button / 2})`}
class="right-toggle clickable">
<rect fill="#fff"
transform={`translate(${- dimensions.header.button} ${- dimensions.header.button})`}
stroke="none"
width={dimensions.header.button * 2}
height={dimensions.header.button * 2}>
</rect>
<path d={getSymbol("rightArrow", dimensions.header.button)}
fill="none"
stroke="#000"
class="right-toggle"/>
</g>
</g>
<g class="assessment-bars"
transform={`translate(0, ${dimensions.header.height + dimensions.padding.header})`}>
<AssessmentRatingGraph {dimensions}
{graphData}/>
</g>
</svg>
</div>
{/if}
</div>
Expand Down
2 changes: 0 additions & 2 deletions waltz-ng/client/assessments/components/info-tile/assessment-widget-store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ export let favouriteIds = derived(

([$defaultPrimaryList, $favouriteExcludedIds, $favouriteIncludedIds]) => {

console.log({$defaultPrimaryList, $favouriteIncludedIds, $favouriteExcludedIds});

return _.reject(
_.concat($defaultPrimaryList, $favouriteIncludedIds),
d => _.includes($favouriteExcludedIds, d));
Expand Down
62 changes: 49 additions & 13 deletions waltz-ng/client/common/svg-icon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,13 @@ import _ from "lodash";


function xPath(size) {
size = Math.sqrt(size);
return "M" + (-size / 2) + "," + (-size / 2) +
"l" + size + "," + size +
"m0," + -(size) +
"l" + (-size) + "," + size;
}

function desktop(size) {
size = Math.sqrt(size);
return `M${size * -1 / 8} ${size * 1 / 2} L${size * -3 / 8} ${size * 5 / 8} L${size * 3 / 8} ${size * 5 / 8} L${size * 1 / 8} ${size * 1 / 2} L${size * -1 / 8} ${size * 1 / 2}
M${size * -1 / 2} ${size * -1 / 2}
C ${size * -3 / 4} ${size * -1 / 2} ${size * -3 / 4} ${size * -1 / 2} ${size * -3 / 4} ${size * -1 / 4}
Expand All @@ -25,7 +23,6 @@ function desktop(size) {
}

function user(size) {
size = Math.sqrt(size);
return `M 0 ${size * -3 / 4}
A ${size * 1 / 2} ${size * 1 / 2} 0 0 1 0 ${size * 1 / 4}
A ${size * 1 / 2} ${size * 1 / 2} 0 0 1 0 ${size * -3 / 4}
Expand All @@ -36,7 +33,6 @@ function user(size) {
}

function folder(size) {
size = Math.sqrt(size);
return `M${size * -1 / 2} ${size * -1 / 2}
C ${size * -3 / 4} ${size * -1 / 2} ${size * -3 / 4} ${size * -1 / 2} ${size * -3 / 4} ${size * -1 / 4}
L ${size * -3 / 4} ${size * 1 / 4}
Expand All @@ -56,7 +52,6 @@ function folder(size) {


function page(size) {
size = Math.sqrt(size);
return `M 0 ${size * -3 / 4}
L ${size * -3 / 5} ${size * -3 / 4}
L ${size * -3 / 5} ${size * 3 / 4}
Expand All @@ -71,15 +66,13 @@ function page(size) {


function circle(size) {
size = Math.sqrt(size);
return `M 0 ${size * -3 / 4}
A ${size * 3 / 4} ${size * 3 / 4} 0 0 1 0 ${size * 3 / 4}
A ${size * 3 / 4} ${size * 3 / 4} 0 0 1 0 ${size * -3 / 4}`
}


function questionMark(size) {
size = Math.sqrt(size);
return `
M ${size * -3 / 8} ${size * -3 / 8}
C 0 ${size * -6 / 8} ${size * 3 / 8} ${size * -1 / 2} ${size * 3 / 8} ${size * -1 / 4}
Expand All @@ -92,7 +85,6 @@ function questionMark(size) {


function questionCircle(size) {
size = Math.sqrt(size);
return `M 0 ${size * -7 / 8}
A ${size * 3 / 4} ${size * 3 / 4} 0 0 1 0 ${size * 7 / 8}
A ${size * 3 / 4} ${size * 3 / 4} 0 0 1 0 ${size * -7 / 8}
Expand All @@ -107,7 +99,6 @@ function questionCircle(size) {


function pages(size) {
size = Math.sqrt(size);
return `M 0 ${size * -3 / 4}
L ${size * -3 / 5} ${size * -3 / 4}
L ${size * -3 / 5} ${size * 3 / 4}
Expand All @@ -127,7 +118,6 @@ function pages(size) {


function hourglass(size) {
size = Math.sqrt(size);
return `M ${size * -3 / 4} ${size * -3 / 4}
L ${size * -3 / 4} ${size * -10 / 16}
L ${size * 3 / 4} ${size * -10 / 16}
Expand All @@ -150,8 +140,51 @@ function hourglass(size) {
}


function leftArrow(size) {
return `M 0 ${size * -3 / 4}
A ${size * 3 / 4} ${size * 3 / 4} 0 0 1 0 ${size * 3 / 4}
A ${size * 3 / 4} ${size * 3 / 4} 0 0 1 0 ${size * -3 / 4}
M ${size * 1 / 2} 0
L ${size * -1 / 2} 0
M ${size * -1 / 4} ${size * -1 / 4}
L ${size * -1 / 2} 0
L ${size * -1 / 4} ${size * 1 / 4}`
}


function rightArrow(size) {
return `M 0 ${size * -3 / 4}
A ${size * 3 / 4} ${size * 3 / 4} 0 0 1 0 ${size * 3 / 4}
A ${size * 3 / 4} ${size * 3 / 4} 0 0 1 0 ${size * -3 / 4}
M ${size * 1 / 2} 0
L ${size * -1 / 2} 0
M ${size * 1 / 4} ${size * -1 / 4}
L ${size * 1 / 2} 0
L ${size * 1 / 4} ${size * 1 / 4}`
}


function pencil(size) {
return `
M ${size * 1 / 2} ${size * -1 / 2}
L ${size * -10 / 16} ${size * 10 / 16}
L ${size * -10 / 16} ${size * 14 / 16}
L ${size * -6 / 16} ${size * 14 / 16}
L ${size * 3 / 4} ${size * -1 / 4}
L ${size * 1 / 2} ${size * -1 / 2}
M ${size * 9 / 16} ${size * -9 / 16}
L ${size * 11 / 16} ${size * -11 / 16}
L ${size * 15 / 16} ${size * -7 / 16}
L ${size * 13 / 16} ${size * -5 / 16}
L ${size * 9 / 16} ${size * -9 / 16}
M ${size * -10 / 16} ${size * 12 / 16}
L ${size * -8 / 16} ${size * 12 / 16}
L ${size * -8 / 16} ${size * 14 / 16}`
}


function fw(size) {
size = Math.sqrt(size);
return ``;
}

const customSymbolTypes = {
Expand All @@ -165,6 +198,9 @@ const customSymbolTypes = {
"questionMark": questionMark,
"questionCircle": questionCircle,
"hourglass": hourglass,
"leftArrow": leftArrow,
"rightArrow": rightArrow,
"pencil": pencil,
"fw": fw
};

Expand All @@ -178,7 +214,7 @@ function constant(x) {

const customSymbol = function () {

let type, size = 64;
let type, size = 8;

function symbol(d, i) {
const customSymbol = _.get(customSymbolTypes, [type.call(this, d, i)]);
Expand All @@ -201,7 +237,7 @@ const customSymbol = function () {
};

export function getSymbol(type, size) {
size = size || 64;
size = size || 8;
if (symbols.indexOf(type) !== -1) {
return symbol().type(type).size(size)();
} else {
Expand Down
Loading

0 comments on commit 8813045

Please sign in to comment.