Infographic Editor

At: Hugo & Cat

Infographic Editor

For: Vizient

Skills:

SASS

Redux

ReactJS

SVG

American Healthcare company Vizient needed to create on-brand infographics without the need for a graphic designer. And they needed to be animated.

Infographics needed to be created by content editors and this mean’t implementing within their Sitecore instance.

The solution was a React application integrated into their Sitecore instance. Sitecore would store the data, the app would create it. The solution would produce a single SVG file which when displayed on page would animate.

But rather than typical REST endpoints data was created and edited within the app as JSON, clicking save would run a server side method to store the data. No async or API to integrate - easy.

The Solution

The solution was a React application integrated into Sitecore. Sitecore would store the data, the app would create it. The solution would produce a single SVG file which when displayed on page with some straight forward JQuery animation would animate when the user scrolled to it on page.

Line Art

Any vector graphic containing only stroked paths could be used as the central graphic. A set of these would be preloaded into the Sitecore.

Annotations

Two types of annotation, stats (including text, number and icon) and text blocks could be created with the first accompanied by a dot marking its place on the line art.

The decision to use Redux from the outset made data management more… well… manageable. But in hindsight could easily have been swapped out for React context API.

In the end everything could be controlled from within Sitecore, colour-ways, icons, main line art graphic, and annotation blocks.

export function findClosestPoint(e, UI) {
    const mousepointX = (e.pageX - UI.appOffset.x);
    const mousepointY = (e.pageY - UI.appOffset.y);
    const pointDistance = 50;

    // create array of point distances from mouse cursor
    const distArray = UI.pathPoints.map((point, index) => {
        const distX = Math.abs(mousepointX - point.x);
        const distY = Math.abs(mousepointY - point.y);

        // use Pythagoras's Theorem to find the straight-line distance to the point
        const distZ = Math.sqrt((distX ** 2) + (distY ** 2));

        return {
            distZ,
            index,
        };
    });

    // sort in ascending order
    const sortedDistArray = distArray.sort((a, b) => a.distZ - b.distZ);

    // do not return a point if the mouse cursor is too far from the point
    if (sortedDistArray[1].distZ > pointDistance) {
        return false;
    }

    const closestIndex = sortedDistArray[1].index;

    return UI.pathPoints[closestIndex];
}

Using a bit of GCSE maths to get this done

Conclusion

What would I do differently?

Although it wasn’t really an option at the time I’d store the data somewhere other than Sitecore, with a set of endpoints to add/remove text directly from the React app. Text within Annotations would be directly editable. I’d swap redux for React Context API.