adding arc height proportional to log as well as label height calcula…

…tion
GMOD · Dec 15, 2021 · 88eb919 · 88eb919
1 parent b67c8fb
commit 88eb919
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/packages/core/util/jexl.ts b/packages/core/util/jexl.ts
@@ -42,6 +42,7 @@ export default function (/* config?: any*/): JexlNonBuildable {
   j.addFunction('floor', Math.floor)
   j.addFunction('round', Math.round)
   j.addFunction('abs', Math.abs)
+  j.addFunction('log10', Math.log10)
   j.addFunction('parseInt', Number.parseInt)
   j.addFunction('parseFloat', Number.parseFloat)
 

diff --git a/plugins/arc/src/ArcRenderer/ArcRendering.tsx b/plugins/arc/src/ArcRenderer/ArcRendering.tsx
@@ -47,14 +47,22 @@ function ArcRendering(props: any) {
     const label = readConfObject(config, 'label', { feature })
     const caption = readConfObject(config, 'caption', { feature })
     const strokeWidth = readConfObject(config, 'thickness', { feature }) || 1
+    const height = readConfObject(config, 'height', { feature }) || 100
     const ref = React.createRef<SVGPathElement>()
     const tooltipWidth = 20 + measureText(caption?.toString())
 
+    const t = 0.5
+    const textYCoord =
+      (1 - t) * (1 - t) * (1 - t) * 0 +
+      3 * ((1 - t) * (1 - t)) * (t * height) +
+      3 * (1 - t) * (t * t) * height +
+      t * t * t * 0
+
     arcsRendered.push(
       <g key={id} onClick={e => onClick(e, featureId)}>
         <path
           id={id}
-          d={`M ${left} 0 C ${left} 100, ${right} 100, ${right} 0`}
+          d={`M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`}
           stroke={stroke}
           strokeWidth={strokeWidth}
           fill="transparent"
@@ -85,14 +93,14 @@ function ArcRendering(props: any) {
         </Tooltip>
         <text
           x={left + (right - left) / 2}
-          y="78px"
+          y={textYCoord + 3}
           style={{ stroke: 'white', strokeWidth: '0.6em' }}
         >
           {label}
         </text>
         <text
           x={left + (right - left) / 2}
-          y="78px"
+          y={textYCoord + 3}
           style={{ stroke: textStroke }}
         >
           {label}

diff --git a/plugins/arc/src/ArcRenderer/__snapshots__/ArcRendering.test.tsx.snap b/plugins/arc/src/ArcRenderer/__snapshots__/ArcRendering.test.tsx.snap
@@ -28,12 +28,12 @@ exports[`one feature 1`] = `
     <text
       style="stroke: white; stroke-width: 0.6em;"
       x="0.6499999999999999"
-      y="78px"
+      y="78"
     />
     <text
       style="stroke: black;"
       x="0.6499999999999999"
-      y="78px"
+      y="78"
     />
   </g>
 </svg>

diff --git a/plugins/arc/src/ArcRenderer/configSchema.tsx b/plugins/arc/src/ArcRenderer/configSchema.tsx
@@ -19,6 +19,11 @@ export default ConfigurationSchema(
       defaultValue: `jexl:get(feature,'score')`,
       contextVariable: ['feature'],
     },
+    height: {
+      type: 'number',
+      description: 'the height of the arcs',
+      defaultValue: `jexl:log10(get(feature,'end')-get(feature,'start'))*50`,
+    },
     caption: {
       type: 'string',
       description: