Test Page for XY Plot Sharing

[JayWebz]

Create test page with country selector and xy graph, add ability for a Twitter embed to happen.
Have a single thing to do on each page instead of all the things available.

• Convert Component to Image
• Generate Filepath for Image
• Draw Over Image
• Download Drawn Over Image
• Control Panel for all buttons to live in
• Comment out standalone image code
• ability to add dragable textbox
• Manage state of adding multiple textboxes
• Ability to update chart display while maintaining annotations. (Add chart to be visible on modal window and add an update chart button to get a new screen capture).
• Ability to add custom alert bands (Add button to set time range of alert band, click to set?, enter a time begin and end?)
• ability to add pre-drawn arrows
• Watermark added to downloaded image
• Set uniform download image dimensions
• Better way to toggle textbox drag than disabling draw mode?
• Social Share Drawn Over Image (blocked)

[JayWebz]

• Looking into setting up a social share page. Added control panel and xy chart, researching what it takes to convert a component into an image, somehow generate a file path for it, then attach it to a twitter share
  • URL currently set to /chart/:entityType/:entityCode
  • Converting component to image - https://www.npmjs.com/package/html2canvas
  • Generate a file path for image - May be able to render a second time as an image directly in the image source definition where it will be drawn on.
  • Potentially allow for the image to be drawn over - https://www.npmjs.com/package/react-canvas-draw
    • Allows for background image to be set for drawing
  • Attach drawn-over image to social share - https://www.npmjs.com/package/react-share

[JayWebz]

Researching social share a bit, it looks like there isn't a way to attach a dynamically generated image to a twitter share without that image being associated with a url. Some solutions have used a service like Google Cloud Services to upload the image on the fly, then use the url generated out of that service in the social share.

https://www.indiehackers.com/post/creating-dynamically-generated-images-for-twitter-and-facebook-shares-6f83481945
https://medium.com/google-cloud/upload-images-to-google-cloud-storage-with-react-native-and-expressjs-61b8874abc49

Another option is to create a couple api endpoints, one to accept a POST of image data created, then another to make a GET request to retrieve the url, but that functionality is not supported in the API right now.

Without somewhere to host the image, there isn't a way to get the generated image into the hands of the user aside from having them download it.

[JayWebz]

https://github.com/react-grid-layout/react-draggable/blob/master/example/example.js looks like a good candidate for the textbox drag and drop.

[JayWebz]

twitter image upload ideal size - 1200px X 675px