<commit_before>/* eslint-disable no-unused-vars */
import React from "react"
/* eslint-enable no-unused-vars */
import { PrismCode } from "react-prism"
import TypesUI from "./Types"
import Chip from "material-ui/Chip"
import Avatar from "material-ui/Avatar"
import { Tooltip, Emmys } from "./Examples"

import {
  Annotation,
  SubjectCircle,
  ConnectorElbow,
  ConnectorEndDot,
  Note
} from "../components/index"

import { DonutIcon } from "./Icons"
import theme from "./theme"
import { dedent } from "dentist"
import ReactMarkdown from "react-markdown"
import AlertIcon from "material-ui/svg-icons/alert/error-outline"

const Title = ({ text, id }) => {
  return (
    <h2 id={id}>
      <a href={`#${id}`}>#</a> {text}
    </h2>
  )
}

export const Code = ({ children }) => {
  return (
    <pre>
      <PrismCode className="language-jsx">{dedent(children)}</PrismCode>
    </pre>
  )
}

export function Introduction() {
  return (
    <section>
      <Title text="Introduction" id="introduction" />
      <p>
        Annotations{" "}
        <strong>
          establish context, and direct our users to insights and anomalies
        </strong>. I made{" "}
        <a href="http://d3-annotation.susielu.com/">d3-annotation</a> to tackle
        this problem, however most of our apps are built in React. The design is
        heavily based on d3-annotation, with{" "}
        <a href="#migrating">a few differences</a>, two new annotation types,
        and easy to compose annotations.
      </p>

      <p>
        Use react-annotation with built-in annotation types, or extend it to
        make custom annotations. It is made for SVG.
      </p>
      <p>
        Contact me through the{" "}
        <a href="https://github.com/susielu/react-annotation/">
          github repo
        </a>{" "}
        or <a href="https://twitter.com/DataToViz">twitter</a>.
      </p>
    </section>
  )
}

export function Setup() {
  return (
    <section>
      <Title text={"Setup"} id="setup" />
      <h3>Using NPM</h3>
      <p>You can add the react-annotation as a node module by running:</p>
      <Code>{"npm i react-annotation -S"}</Code>
      If you're new to using React, I suggest using{" "}
      <a href="https://github.com/facebookincubator/create-react-app">
        react-create-app
      </a>{" "}
      to start your project.
    </section>
  )
}

export function Types() {
  const source = `
  All annotations are made of just three parts, a **note**, a **connector**, and a **subject**.
  
  <img alt="Anatomy of an annotation" src="img/anatomy.png" />
  
  They are the foundational blocks of this library. Explore the UI below to understand the built-in types.
  `

  return (
    <section>
      <Title text="Annotation Types" id="types" />
      <ReactMarkdown source={source} />
      <TypesUI />
    </section>
  )
}

export function AnnotationTypesAPI() {
  const source = `
  ### **_Built-in Annotations_**
  Built-in annotations are a set of preset Subjects, Connectors, and Notes as seen in the [Annotation Types](#types) section.
  
  All built-in annotation types have the following props
  - **x (number)**: X position of the subject and one end of the connector
  - **y (number)**: Y position of the subject and one end of the connector
  - **dx (number)**: X Position of the note and one end of the connector, as an offset from x,y
  - **dx (number)**: Y Position of the note and one end of the connector, as an offset from x,y
  - **nx (number)**: X Position of the note and one end of the connector, as the raw x,y position **not** an offset
  - **ny (number)**: Y Position of the note and one end of the connector, as the raw x,y position **not** an offset
  - **color(string)**: A color string that will be applied to the annotation. This color can be overridden via css
  - **events(object)**: An object with [react event hanlders](https://reactjs.org/docs/handling-events.html) as keys and functions to handle those events. Each handler is bound with the annotation context and has the prarameters: annotation props, annotation state, event
  - **editMode(boolean)**: Turns on handles for moving annotations, the following are only trigged with editMode on:
    - **onDragStart(function)**: Passes the current props of the annotation when dragging starts
    - **onDrag(function)**: Passes the current props of the annotation while dragging 
    - **onDragEnd(function)**: Passes the current props of the annotation when dragging ends
  - **disable ([string])**: takes the values 'connector', 'subject', and 'note'. Pass them in this array if you want to disable those parts from rendering
  - **connector (object with the following properties and (values))**
    - **type (string, "line", "elbow", or "curve")** 
    - **end (string, "dot", or "arrow")**
    - **curve (function):** Made to use a curve function from [d3-shape](https://github.com/d3/d3-shape). Defaults to \`curveCatmullRom\`.
    - **points (array[[x,y],[x,y]...])**: Anchor points for the curve function  
    - **endScale (number)**: A multiplying factor for sizing the connector end  <commit_msg>Doc update to correct react event handlers<commit_after>/* eslint-disable no-unused-vars */
import React from "react"
/* eslint-enable no-unused-vars */
import { PrismCode } from "react-prism"
import TypesUI from "./Types"
import Chip from "material-ui/Chip"
import Avatar from "material-ui/Avatar"
import { Tooltip, Emmys } from "./Examples"

import {
  Annotation,
  SubjectCircle,
  ConnectorElbow,
  ConnectorEndDot,
  Note
} from "../components/index"

import { DonutIcon } from "./Icons"
import theme from "./theme"
import { dedent } from "dentist"
import ReactMarkdown from "react-markdown"
import AlertIcon from "material-ui/svg-icons/alert/error-outline"

const Title = ({ text, id }) => {
  return (
    <h2 id={id}>
      <a href={`#${id}`}>#</a> {text}
    </h2>
  )
}

export const Code = ({ children }) => {
  return (
    <pre>
      <PrismCode className="language-jsx">{dedent(children)}</PrismCode>
    </pre>
  )
}

export function Introduction() {
  return (
    <section>
      <Title text="Introduction" id="introduction" />
      <p>
        Annotations{" "}
        <strong>
          establish context, and direct our users to insights and anomalies
        </strong>. I made{" "}
        <a href="http://d3-annotation.susielu.com/">d3-annotation</a> to tackle
        this problem, however most of our apps are built in React. The design is
        heavily based on d3-annotation, with{" "}
        <a href="#migrating">a few differences</a>, two new annotation types,
        and easy to compose annotations.
      </p>

      <p>
        Use react-annotation with built-in annotation types, or extend it to
        make custom annotations. It is made for SVG.
      </p>
      <p>
        Contact me through the{" "}
        <a href="https://github.com/susielu/react-annotation/">
          github repo
        </a>{" "}
        or <a href="https://twitter.com/DataToViz">twitter</a>.
      </p>
    </section>
  )
}

export function Setup() {
  return (
    <section>
      <Title text={"Setup"} id="setup" />
      <h3>Using NPM</h3>
      <p>You can add the react-annotation as a node module by running:</p>
      <Code>{"npm i react-annotation -S"}</Code>
      If you're new to using React, I suggest using{" "}
      <a href="https://github.com/facebookincubator/create-react-app">
        react-create-app
      </a>{" "}
      to start your project.
    </section>
  )
}

export function Types() {
  const source = `
  All annotations are made of just three parts, a **note**, a **connector**, and a **subject**.
  
  <img alt="Anatomy of an annotation" src="img/anatomy.png" />
  
  They are the foundational blocks of this library. Explore the UI below to understand the built-in types.
  `

  return (
    <section>
      <Title text="Annotation Types" id="types" />
      <ReactMarkdown source={source} />
      <TypesUI />
    </section>
  )
}

export function AnnotationTypesAPI() {
  const source = `
  ### **_Built-in Annotations_**
  Built-in annotations are a set of preset Subjects, Connectors, and Notes as seen in the [Annotation Types](#types) section.
  
  All built-in annotation types have the following props
  - **x (number)**: X position of the subject and one end of the connector
  - **y (number)**: Y position of the subject and one end of the connector
  - **dx (number)**: X Position of the note and one end of the connector, as an offset from x,y
  - **dx (number)**: Y Position of the note and one end of the connector, as an offset from x,y
  - **nx (number)**: X Position of the note and one end of the connector, as the raw x,y position **not** an offset
  - **ny (number)**: Y Position of the note and one end of the connector, as the raw x,y position **not** an offset
  - **color(string)**: A color string that will be applied to the annotation. This color can be overridden via css
  - **events(object)**: An object with [react event handlers](https://reactjs.org/docs/handling-events.html) as keys and functions to handle those events. Each handler is bound with the annotation context and has the prarameters: annotation props, annotation state, event
  - **editMode(boolean)**: Turns on handles for moving annotations, the following are only trigged with editMode on:
    - **onDragStart(function)**: Passes the current props of the annotation when dragging starts
    - **onDrag(function)**: Passes the current props of the annotation while dragging 
    - **onDragEnd(function)**: Passes the current props of the annotation when dragging ends
  - **disable ([string])**: takes the values 'connector', 'subject', and 'note'. Pass them in this array if you want to disable those parts from rendering
  - **connector (object with the following properties and (values))**
    - **type (string, "line", "elbow", or "curve")** 
    - **end (string, "dot", or "arrow")**
    - **curve (function):** Made to use a curve function from [d3-shape](https://github.com/d3/d3-shape). Defaults to \`curveCatmullRom\`.
    - **points (array[[x,y],[x,y]...])**: Anchor points for the curve function  
    - **endScale (number)**: A multiplying factor for sizing the connector end  
{'fraction_non_alphanumeric': 0.1319410559188055, 'fraction_numerical': 0.0019517907680296671, 'mean_word_length': 3.1339249697458653, 'pattern_counts': {'":': 0, '<': 91, '<?xml version=': 0, '>': 95, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1835866', 'n_tokens_mistral': 3105, 'n_tokens_neox': 2990, 'n_words': 1160}