rwbrockhoff

const bulkPhoneNumberList = invitations.map(person => {
  return `{\"binding_type\":\"sms\",\"address\":\"+1${person.phone_number}\"}`;
});

const response = await client.notify
  .services(process.env.TWILIO_NOTIFY_SID)
  .notifications.create({
    toBinding: phoneNumberList,
    body: `Welcome to HyperCarrot! \nYou've been invited by ${orgName}. Click below to get started!\n${
      process.env.FRONTEND_URL

rwbrockhoff

//Frontend Download Method

downloadVideo = () => {
    client({
      url: 'http://localhost:3001/feed/download',
      method: 'GET',
      responseType: 'blob', // important
    }).then((response) => {
      //Repsonse.data does have video file and opening url for non-iOS browsers it works fine
      const setWindow = window.URL || window.webkitURL;

rwbrockhoff

options: {
  //Customize chart options
  tooltips: {
      displayColors: false,
      titleFontSize: 16,
      bodyFontSize: 14,
      xPadding: 10,
      yPadding: 10,
      callbacks: {
          label: (tooltipItem, data) => {

rwbrockhoff

// Display and position tooltip
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
const padding = 10;
const position = this._chart.canvas.getBoundingClientRect();

// Ensure Tooltip stays in view at far-left and far-right edges

const toolWidth = tooltipModel.width;
const graphWidth = lineGraph.width;

rwbrockhoff

tooltips: {
    // Disable the on-canvas tooltip
    enabled: false,

    custom: function(tooltipModel) {
        // Tooltip Element
        var tooltipEl = document.getElementById('chartjs-tooltip');

        // Create element on first render
        if (!tooltipEl) {

rwbrockhoff

options : { 
  ///Other configurable options
  tooltips: {
    backgroundColor: "rgba(0,0,0,0.8)"
    bodyAlign: "left"
    bodyFontColor: "#fff"
    bodySpacing: 2
    borderColor: "rgba(0,0,0,0)"
    borderWidth: 0
    callbacks: {beforeTitle: ƒ, title: ƒ, afterTitle: ƒ, beforeBody: ƒ, beforeLabel: ƒ, …}

rwbrockhoff

import React, { PureComponent } from 'react'

export default class LineGraph extends PureComponent {
  ///....rest of our code...///
}

rwbrockhoff

import React, { Component } from 'react'
import Chart from "chart.js";
import classes from "./LineGraph.module.css";
let myLineChart;

//--Chart Style Options--//
Chart.defaults.global.defaultFontFamily = "'PT Sans', sans-serif"
Chart.defaults.global.legend.display = false;
//--Chart Style Options--//

rwbrockhoff

const {height: graphHeight} = myChartRef.canvas;

let gradientLine = myChartRef
    .createLinearGradient(0, 0, 0, graphHeight);
gradientLine.addColorStop(0, "rgb(255, 0, 110, 0.2)");
gradientLine.addColorStop(0.5, "rgb(255, 0, 110, 0.35)");
gradientLine.addColorStop(1, "rgb(255, 0, 110, 0.7)");

rwbrockhoff

const {width: graphWidth} = myChartRef.canvas;

let gradientLine = myChartRef
    .createLinearGradient(0, 0, graphWidth * 2, 0);
gradientLine.addColorStop(0, "#FF006E");
gradientLine.addColorStop(1, "#F46036");