diff --git a/waltz-ng/client/assessments/components/info-tile/AssessmentRatingGraph.svelte b/waltz-ng/client/assessments/components/info-tile/AssessmentRatingGraph.svelte index 2fd2096560..57965a705c 100644 --- a/waltz-ng/client/assessments/components/info-tile/AssessmentRatingGraph.svelte +++ b/waltz-ng/client/assessments/components/info-tile/AssessmentRatingGraph.svelte @@ -38,7 +38,7 @@ font-size={dimensions.label.height} text-anchor="end" fill="black"> - {truncate(ratingCount.rating?.name, 20)} + {truncate(ratingCount.rating?.name, 16)} {/each} \ No newline at end of file diff --git a/waltz-ng/client/assessments/components/info-tile/AssessmentWidget.svelte b/waltz-ng/client/assessments/components/info-tile/AssessmentWidget.svelte index 90eaec6530..6adc4d833d 100644 --- a/waltz-ng/client/assessments/components/info-tile/AssessmentWidget.svelte +++ b/waltz-ng/client/assessments/components/info-tile/AssessmentWidget.svelte @@ -23,6 +23,7 @@ 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; @@ -30,7 +31,7 @@ let dimensions = { svg: { height: 200, - width: 200 + width: 300 }, padding: { left: 40, @@ -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 } }; @@ -56,6 +58,7 @@ let assessmentSummaryCall; let selectedDefnId; let showAssessmentPicker = false; + let initialPageLoad = true; function moveRight() { const currentIndex = _.findIndex(sortedDefinitions, d => d.id === selectedDefnId); @@ -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) { @@ -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; } } @@ -155,57 +164,83 @@ +
-
-

- -

-
-
-

- {#if !showAssessmentPicker} - {_.get(definitionsById, [selectedDefnId, "name"], `Unknown definition [${selectedDefnId}]`)} - - {:else} - - {/if} -

-
-
-

- -

-
-
-
-
12}> - - - - {_.get(definitionsById, [selectedDefnId, "name"], `Unknown definition [${selectedDefnId}]`)} - - - - - - -
+
+ {:else} +
10}> + + + + + + + {_.get(definitionsById, [selectedDefnId, "name"], `Unknown definition [${selectedDefnId}]`)} + + + + + + + + + + + + + + + + + + +
+ {/if} diff --git a/waltz-ng/client/assessments/components/info-tile/assessment-widget-store.js b/waltz-ng/client/assessments/components/info-tile/assessment-widget-store.js index f703d3adcc..9f1bacb661 100644 --- a/waltz-ng/client/assessments/components/info-tile/assessment-widget-store.js +++ b/waltz-ng/client/assessments/components/info-tile/assessment-widget-store.js @@ -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)); diff --git a/waltz-ng/client/common/svg-icon.js b/waltz-ng/client/common/svg-icon.js index 911645eb86..c44d7a760a 100644 --- a/waltz-ng/client/common/svg-icon.js +++ b/waltz-ng/client/common/svg-icon.js @@ -3,7 +3,6 @@ import _ from "lodash"; function xPath(size) { - size = Math.sqrt(size); return "M" + (-size / 2) + "," + (-size / 2) + "l" + size + "," + size + "m0," + -(size) + @@ -11,7 +10,6 @@ function xPath(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} @@ -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} @@ -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} @@ -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} @@ -71,7 +66,6 @@ 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}` @@ -79,7 +73,6 @@ function circle(size) { 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} @@ -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} @@ -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} @@ -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} @@ -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 = { @@ -165,6 +198,9 @@ const customSymbolTypes = { "questionMark": questionMark, "questionCircle": questionCircle, "hourglass": hourglass, + "leftArrow": leftArrow, + "rightArrow": rightArrow, + "pencil": pencil, "fw": fw }; @@ -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)]); @@ -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 { diff --git a/waltz-ng/client/playpen/2/playpen2.js b/waltz-ng/client/playpen/2/playpen2.js index f36b541d13..b420fe2b13 100644 --- a/waltz-ng/client/playpen/2/playpen2.js +++ b/waltz-ng/client/playpen/2/playpen2.js @@ -34,7 +34,7 @@ function controller(serviceBroker, $element) { const svgElem = select($element.find("svg")[0]); - const xs = [66, 66]; //, 7, 32]; + const xs = [8, 8]; const selection = svgElem .selectAll("path") @@ -43,7 +43,7 @@ function controller(serviceBroker, $element) { selection .enter() .append("path") - .attr("d", (d, i) => i % 2 === 0 ? getSymbol("hourglass", d) : symbol().type(symbolCircle).size(d)()) + .attr("d", (d, i) => i % 2 === 0 ? getSymbol("pencil", d) : symbol().type(symbolCircle).size(d)()) .attr("transform", (d, i) => `translate(${i * 50 + 10}, 10)`) .attr("stroke", "red") .attr("stroke-width", 0.1)