SVG Interface

class epyk.interfaces.graphs.CompChartsSvg.SVG(ui)

arrow_left(x1: float = 0, y1: Optional[float] = None, x2: Optional[float] = None, y2: Optional[float] = None, size: int = 10, width: Optional[Union[tuple, int, str]] = (500, 'px'), height: Optional[Union[tuple, int, str]] = (300, 'px'), html_code: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Tags:
Categories:

Usage:

page.ui.charts.svg.arrow_left()

Parameters:

x1 –
y1 –
x2 –
y2 –
size – Optional.
width – Optional. A tuple with the integer for the component width and its unit
height – Optional. A tuple with the integer for the component height and its unit
html_code – Optional. An identifier for this component (on both Python and Javascript side)
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage

arrow_right(x1: float = 0, y1: Optional[float] = None, x2: Optional[float] = None, y2: Optional[float] = None, size: int = 10, width: Optional[Union[tuple, int, str]] = (500, 'px'), height: Optional[Union[tuple, int, str]] = (300, 'px'), html_code: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Tags:
Categories:

Usage:

page.ui.charts.svg.arrow_right(y1=40)

Parameters:

x1 –
y1 –
x2 –
y2 –
size – Optional.
width – Optional. A tuple with the integer for the component width and its unit
height – Optional. A tuple with the integer for the component height and its unit
html_code – Optional. An identifier for this component (on both Python and Javascript side)
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage

axes(size: int = 10, width: Optional[Union[tuple, int, str]] = (500, 'px'), height: Optional[Union[tuple, int, str]] = (300, 'px'), html_code: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Tags:
Categories:

Usage:

svg = page.ui.charts.svg.axes()
m = svg.defs().marker("circle", "0 0 10 10", 5, 5)
m.circle(5, 5, 5, 'red')
m.markerWidth(10).markerHeight(10)
p = svg.path(0, 0, from_origin=True).line_to(50, 100).horizontal_line_to(300).line_to(400, 200)
p.markers(m.url)

Parameters:

size – Optional.
width – Optional. A tuple with the integer for the component width and its unit
height – Optional. A tuple with the integer for the component height and its unit
html_code – Optional. An identifier for this component (on both Python and Javascript side)
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage

circle(x: float, y: float, r: float, width: Optional[Union[tuple, int, str]] = (500, 'px'), height: Optional[Union[tuple, int, str]] = (300, 'px'), options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Entry point to the basic line definition in a SVG HTML Tag.

Tags:
Categories:

Usage:

page.ui.charts.svg.line(10, 30, 40, 69)

Related Pages:

https://www.w3schools.com/graphics/svg_line.asp

Parameters:

x – The x attribute defines the start of the line on the x-axis
y – The y attribute defines the start of the line on the y-axis
r – The r attribute defines the radius
width – Optional. A tuple with the integer for the component width and its unit
height – Optional. A tuple with the integer for the component height and its unit
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage

ellipse(cx: float, cy: float, rx: float, ry: float, width: Optional[Union[tuple, int, str]] = (500, 'px'), height: Optional[Union[tuple, int, str]] = (300, 'px'), options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

SVG Ellipse - <ellipse>.

Tags:
Categories:

Usage:

page.ui.charts.svg.ellipse(100, 100, 40, 69)

Related Pages:

https://www.w3schools.com/graphics/svg_ellipse.asp

Parameters:

cx – The cx attribute defines the x coordinate of the center of the ellipse
cy – The cy attribute defines the y coordinate of the center of the ellipse
rx – The rx attribute defines the horizontal radius
ry – The ry attribute defines the vertical radius
width – Optional. A tuple with the integer for the component width and its unit
height – Optional. A tuple with the integer for the component height and its unit
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage

heart(w: float, h: float, fill: str = 'none', width: Optional[Union[tuple, int, str]] = (500, 'px'), height: Optional[Union[tuple, int, str]] = (300, 'px'), options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Tags:
Categories:

Usage:

c = page.ui.charts.svg.heart(w=50, h=100, fill="pink")
c[0].transform("transform", "rotate", "0 100 100", "360 100 10")

Parameters:

w –
h –
fill –
width – Optional. A tuple with the integer for the component width and its unit.
height – Optional. A tuple with the integer for the component height and its unit.
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

line(x1: float = 0, y1: Optional[float] = None, x2: Optional[float] = None, y2: Optional[float] = None, width: Optional[Union[tuple, int, str]] = (500, 'px'), height: Optional[Union[tuple, int, str]] = (300, 'px'), options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Entry point to the basic line definition in a SVG HTML Tag.

Tags:
Categories:

Usage:

page.ui.charts.svg.line(10, 30, 40, 69)

Related Pages:

https://www.w3schools.com/graphics/svg_line.asp

Parameters:

x1 – The x1 attribute defines the start of the line on the x-axis
y1 – Optional. The y1 attribute defines the start of the line on the y-axis
x2 – Optional. The x2 attribute defines the end of the line on the x-axis
y2 – Optional. The y2 attribute defines the end of the line on the y-axis
width – Optional. A tuple with the integer for the component width and its unit
height – Optional. A tuple with the integer for the component height and its unit
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage

new(width: Optional[Union[tuple, int, str]] = (500, 'px'), height: Optional[Union[tuple, int, str]] = (300, 'px'))

SVG stands for Scalable Vector Graphics.

SVG defines vector-based graphics in XML format.

Tags:
Categories:

Usage:

svg = page.ui.charts.svg.new(width=200)
svg.add_text("I love SVG!", x=0, y=15, options={"fill": 'red'})

Related Pages:

https://developer.mozilla.org/en-US/docs/Web/SVG https://www.w3schools.com/graphics/svg_intro.asp

Parameters:

width – Optional. A tuple with the integer for the component width and its unit
height – Optional. A tuple with the integer for the component height and its unit

path(x: float = 0, y: float = 0, fill: Optional[str] = 'none', origin: bool = False, bespoke_path=None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Tags:
Categories:

Usage:

Related Pages:

Parameters:

x –
y –
fill –
origin –
bespoke_path –
options – Dictionary. Optional. Specific Python options available for this component.
profile – Boolean | Dictionary. Optional. A flag to set the component performance storage.

polygone(points: List[tuple], width: Optional[Union[tuple, int, str]] = (500, 'px'), height: Optional[Union[tuple, int, str]] = (300, 'px'), options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Tags:
Categories:

Usage:

page.ui.charts.svg.polygone([(15, 80), (29, 50), (43, 60), (57, 30), (71, 40), (85, 15)])

Related Pages:

https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_polygon

Parameters:

points – The points attribute defines the list of points (pairs of coordinates) required to draw the polyline
width – Optional. A tuple with the integer for the component width and its unit
height – Optional. A tuple with the integer for the component height and its unit
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage

polyline(points: List[tuple], width: Optional[Union[tuple, int, str]] = (500, 'px'), height: Optional[Union[tuple, int, str]] = (300, 'px'), options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Tags:
Categories:

Usage:

page.ui.charts.svg.polyline([(15, 80), (29, 50), (43, 60), (57, 30), (71, 40), (85, 15)])

Related Pages:

https://www.w3schools.com/graphics/svg_polyline.asp

Parameters:

points – The points attribute defines the list of points (pairs of coordinates) required to draw the polyline
width – Optional. A tuple with the integer for the component width and its unit
height – Optional. A tuple with the integer for the component height and its unit
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage

rectangle(x: float, y: float, width: Optional[Union[tuple, int, str]] = (500, 'px'), height: Optional[Union[tuple, int, str]] = (300, 'px'), fill: Optional[str] = None, rx: float = 0, ry: float = 0, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Tags:
Categories:

Usage:

:param x:
:param y:
:param width: Optional. A tuple with the integer for the component width and its unit.
:param height: Optional. A tuple with the integer for the component height and its unit.
:param fill:
:param rx:
:param ry:
:param options: Optional. Specific Python options available for this component.
:param profile: Optional. A flag to set the component performance storage.

star(fill: str = 'none', width: Optional[Union[tuple, int, str]] = (500, 'px'), height: Optional[Union[tuple, int, str]] = (300, 'px'), options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Tags:
Categories:

Usage:

Related Pages:

https://codepen.io/susanwinters/pen/WxbRJK

Parameters:

fill –
width – Optional. A tuple with the integer for the component width and its unit.
height – Optional. A tuple with the integer for the component height and its unit.
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

triangle(point1: tuple, point2: Optional[tuple] = None, point3: Optional[tuple] = None, fill: str = 'None', width: Optional[Union[tuple, int, str]] = (500, 'px'), height: Optional[Union[tuple, int, str]] = (300, 'px'), options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Tags:
Categories:

Usage:

rptObj.ui.charts.svg.triangle((50, 100))

Related Pages:

https://www.w3schools.com/graphics/svg_polyline.asp

Parameters:

point1 –
point2 – Optional.
point3 – Optional.
fill – Optional.
width – Optional. A tuple with the integer for the component width and its unit
height – Optional. A tuple with the integer for the component height and its unit
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage